<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="icon" href="/blog/blog/images/icons/favicon-16x16.png?v=2.6.2" type="image/png" sizes="16x16"><link rel="icon" href="/blog/blog/images/icons/favicon-32x32.png?v=2.6.2" type="image/png" sizes="32x32"><meta name="description" content=".back-top{position: fixed;top: 500px;height: 0px;float: right;right: 50px;} .back-top&gt;a{font-weight:bold;width: 50px;height: 50px;text-align: center;text-decoration: none;font-size: 5px;line-height:">
<meta property="og:type" content="article">
<meta property="og:title" content="VUE学习笔记-基础语法及相应应用-1-基本语法">
<meta property="og:url" content="https://bruce-jj.gitee.io/blog/2021/03/28/VUE%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95%E5%8F%8A%E7%9B%B8%E5%BA%94%E5%BA%94%E7%94%A8-1/index.html">
<meta property="og:site_name" content="斯人若彩虹 遇上方知有">
<meta property="og:description" content=".back-top{position: fixed;top: 500px;height: 0px;float: right;right: 50px;} .back-top&gt;a{font-weight:bold;width: 50px;height: 50px;text-align: center;text-decoration: none;font-size: 5px;line-height:">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20210329210051193.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20210329210625512.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20210330090649903.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20210330091336939.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20210330101906688.png">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20210330190500540.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20210330190953268.png">
<meta property="article:published_time" content="2021-03-28T08:17:03.000Z">
<meta property="article:modified_time" content="2021-05-11T19:15:00.000Z">
<meta property="article:author" content="何水浪">
<meta property="article:tag" content="前端框架学习">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://img-blog.csdnimg.cn/20210329210051193.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70"><title>VUE学习笔记-基础语法及相应应用-1-基本语法 | 斯人若彩虹 遇上方知有</title><link ref="canonical" href="https://bruce-jj.gitee.io/blog/2021/03/28/VUE%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95%E5%8F%8A%E7%9B%B8%E5%BA%94%E5%BA%94%E7%94%A8-1/"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/css/all.min.css" type="text/css"><link rel="stylesheet" href="/blog/css/index.css?v=2.6.2"><script>var Stun = window.Stun || {};
var CONFIG = {
  root: '/blog/',
  algolia: undefined,
  assistSearch: undefined,
  fontIcon: {"prompt":{"success":"fas fa-check-circle","info":"fas fa-arrow-circle-right","warning":"fas fa-exclamation-circle","error":"fas fa-times-circle"},"copyBtn":"fas fa-copy"},
  sidebar: {"offsetTop":"20px","tocMaxDepth":6},
  header: {"enable":true,"showOnPost":true,"scrollDownIcon":false},
  postWidget: {"endText":true},
  nightMode: {"enable":true},
  back2top: {"enable":true},
  codeblock: {"style":"default","highlight":"light","wordWrap":false},
  reward: false,
  fancybox: false,
  zoomImage: {"gapAside":"20px"},
  galleryWaterfall: undefined,
  lazyload: false,
  pjax: undefined,
  externalLink: {"icon":{"enable":true,"name":"fas fa-external-link-alt"}},
  shortcuts: undefined,
  prompt: {"copyButton":"复制","copySuccess":"复制成功","copyError":"复制失败"},
  sourcePath: {"js":"js","css":"css","images":"images"},
};

window.CONFIG = CONFIG;</script><meta name="generator" content="Hexo 5.4.0"><link rel="alternate" href="/blog/atom.xml" title="斯人若彩虹 遇上方知有" type="application/atom+xml">
</head><body><div class="container" id="container"><header class="header" id="header"><div class="header-inner"><nav class="header-nav header-nav--fixed"><div class="header-nav-inner"><div class="header-nav-menubtn"><i class="fas fa-bars"></i></div><div class="header-nav-menu"><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/blog/"><span class="header-nav-menu-item__icon"><i class="fas fa-home"></i></span><span class="header-nav-menu-item__text">首页</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/blog/archives/"><span class="header-nav-menu-item__icon"><i class="fas fa-folder-open"></i></span><span class="header-nav-menu-item__text">归档</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/blog/categories/"><span class="header-nav-menu-item__icon"><i class="fas fa-layer-group"></i></span><span class="header-nav-menu-item__text">分类</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/blog/tags/"><span class="header-nav-menu-item__icon"><i class="fas fa-tags"></i></span><span class="header-nav-menu-item__text">标签</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/blog/friends/"><span class="header-nav-menu-item__icon"><i class="fas fa-link"></i></span><span class="header-nav-menu-item__text">友链</span></a></div></div><div class="header-nav-search"><span class="header-nav-search__icon"><i class="fas fa-search"></i></span><span class="header-nav-search__text">搜索</span></div><div class="header-nav-mode"><div class="mode"><div class="mode-track"><span class="mode-track-moon"></span><span class="mode-track-sun"></span></div><div class="mode-thumb"></div></div></div></div></nav><div class="header-banner"><div class="header-banner-info"><div class="header-banner-info__title">斯人若彩虹 遇上方知有</div><div class="header-banner-info__subtitle"></div></div></div></div></header><main class="main" id="main"><div class="main-inner"><div class="content-wrap" id="content-wrap"><div class="content" id="content"><!-- Just used to judge whether it is an article page--><div id="is-post"></div><div class="post"><header class="post-header"><h1 class="post-title">VUE学习笔记-基础语法及相应应用-1-基本语法</h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-03-28</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2021-05-12</span></span><span class="post-meta-item post-meta-item--wordcount"><span class="post-meta-item__icon"><i class="far fa-file-word"></i></span><span class="post-meta-item__info">字数统计</span><span class="post-meta-item__value">9k</span></span><span class="post-meta-item post-meta-item--readtime"><span class="post-meta-item__icon"><i class="far fa-clock"></i></span><span class="post-meta-item__info">阅读时长</span><span class="post-meta-item__value">76分</span></span></div></header><div class="post-body"><!-- 页面必备样式 -->
<style>
.back-top{position: fixed;top: 500px;height: 0px;float: right;right: 50px;}
.back-top>a{font-weight:bold;width: 50px;height: 50px;text-align: center;text-decoration: none;font-size: 5px;line-height: 50px;border-radius: 50px;background-color:rgba(255,255,255,0.5);}
</style>
<div class="back-top">
    <a href="#top"> >返回顶部< </a>
</div>
<!-- toc -->
<!-- 必备样式结束 -->
 
# Vue开头好戏-小案例
## Hello World
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Hello World<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/vue@next&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    Vue.createApp(&#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>: <span class="string">&#x27;&lt;div&gt;Hello World&lt;/div&gt;&#x27;</span></span></span><br><span class="line"><span class="javascript">    &#125;).mount(<span class="string">&quot;#app&quot;</span>)</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></div></figure>


        <h2 id="面向数据编程-gt-实现计时器"   >
          <a href="#面向数据编程-gt-实现计时器" class="heading-link"><i class="fas fa-link"></i></a><a href="#面向数据编程-gt-实现计时器" class="headerlink" title="面向数据编程-&gt;实现计时器"></a>面向数据编程-&gt;实现计时器</h2>
      <figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>计数器<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/vue@next&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    Vue.createApp(&#123;</span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">counter</span>:<span class="number">1</span> </span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;, <span class="comment">//需要一个mounted方法 自动执行</span></span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="title">mounted</span>(<span class="params"></span>)</span>&#123; <span class="comment">//页面渲染完 就自动执行</span></span></span><br><span class="line"><span class="javascript">            <span class="built_in">setInterval</span>(<span class="function">()=&gt;</span>&#123;</span></span><br><span class="line"><span class="javascript">                <span class="built_in">this</span>.$data.counter += <span class="number">1</span></span></span><br><span class="line"><span class="javascript">            &#125;, <span class="number">1000</span>) <span class="comment">//周期执行</span></span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>: <span class="string">&#x27;&lt;div&gt;&#123;&#123;counter&#125;&#125;&lt;/div&gt;&#x27;</span> <span class="comment">//字面量 双括号 放JS表达式或者变量</span></span></span><br><span class="line"><span class="javascript">    &#125;).mount(<span class="string">&quot;#app&quot;</span>)</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

        <h3 id="mounted-表示当文档加载时-就执行该函数"   >
          <a href="#mounted-表示当文档加载时-就执行该函数" class="heading-link"><i class="fas fa-link"></i></a><a href="#mounted-表示当文档加载时-就执行该函数" class="headerlink" title="mounted()表示当文档加载时 就执行该函数"></a>mounted()表示当文档加载时 就执行该函数</h3>
      
        <h3 id="data-中存放类似-全局数据"   >
          <a href="#data-中存放类似-全局数据" class="heading-link"><i class="fas fa-link"></i></a><a href="#data-中存放类似-全局数据" class="headerlink" title="data(){}中存放类似 全局数据"></a>data(){}中存放类似 全局数据</h3>
      
        <h3 id="template-放入全局数据-取值"   >
          <a href="#template-放入全局数据-取值" class="heading-link"><i class="fas fa-link"></i></a><a href="#template-放入全局数据-取值" class="headerlink" title="template:放入全局数据 取值"></a>template:放入全局数据 取值</h3>
      
        <h2 id="绑定数据-amp-事件-gt-编写方法"   >
          <a href="#绑定数据-amp-事件-gt-编写方法" class="heading-link"><i class="fas fa-link"></i></a><a href="#绑定数据-amp-事件-gt-编写方法" class="headerlink" title="绑定数据&amp;事件-&gt;编写方法"></a>绑定数据&amp;事件-&gt;编写方法</h2>
      <figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>象牙山洗脚城<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/vue@next&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    Vue.createApp(&#123;</span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">content</span>:<span class="string">&quot;&quot;</span>, </span></span><br><span class="line"><span class="javascript">                <span class="attr">num</span>:<span class="number">0</span>, </span></span><br><span class="line"><span class="javascript">                <span class="attr">Menu</span>:<span class="string">&#x27;真空套餐 帝王套餐 夏日套餐 学生套餐&#x27;</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">isShowMenu</span>: <span class="literal">false</span> <span class="comment">//标志不展示</span></span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">methods</span>:&#123;</span></span><br><span class="line"><span class="javascript">            <span class="function"><span class="title">welcomeBtnClick</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">                <span class="built_in">this</span>.content = <span class="string">&quot;欢迎光临, 贵宾&quot;</span> + ++<span class="built_in">this</span>.num + <span class="string">&quot;位&quot;</span></span></span><br><span class="line"><span class="javascript">            &#125;,</span></span><br><span class="line"><span class="javascript">            <span class="function"><span class="title">byeBtnClick</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">                <span class="keyword">if</span>(<span class="built_in">parseInt</span>(<span class="built_in">this</span>.num) == <span class="number">0</span>)&#123;</span></span><br><span class="line"><span class="javascript">                    alert(<span class="string">&quot;操作有误，无人可离.&quot;</span>)</span></span><br><span class="line"><span class="javascript">                    <span class="keyword">return</span>;</span></span><br><span class="line"><span class="javascript">                &#125;</span></span><br><span class="line"><span class="javascript">                <span class="built_in">this</span>.content = <span class="string">&quot;还剩贵宾&quot;</span> + --<span class="built_in">this</span>.num + <span class="string">&quot;位, &quot;</span>+<span class="string">&quot;欢迎下次光临!&quot;</span></span></span><br><span class="line"><span class="javascript">            &#125;,</span></span><br><span class="line"><span class="javascript">            <span class="function"><span class="title">hideBtnClick</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">                <span class="built_in">this</span>.isShowMenu = !<span class="built_in">this</span>.isShowMenu</span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>: <span class="comment">//波浪 代表多行 v-on:click=&quot;&quot; 表示对某个标签绑定某个函数 </span></span></span><br><span class="line"><span class="javascript">                  <span class="comment">//&#123;&#123;content可以看做是数据绑定 从data中取出的数据&#125;&#125;</span></span></span><br><span class="line"><span class="javascript">        <span class="string">`   </span></span></span><br><span class="line"><span class="string"><span class="javascript">            &lt;div&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">                &lt;div&gt;&#123;&#123;content&#125;&#125;&lt;/div&gt; </span></span></span><br><span class="line"><span class="string"><span class="javascript">                &lt;button v-on:click=&quot;welcomeBtnClick&quot;&gt;有顾客来&lt;/button&gt; &amp;nbsp; </span></span></span><br><span class="line"><span class="string"><span class="javascript">                &lt;button v-on:click=&quot;byeBtnClick&quot;&gt;顾客离开&lt;/button&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">                &lt;div&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">                    &lt;div v-if=&quot;isShowMenu&quot;&gt;&#123;&#123;Menu&#125;&#125;&lt;/div&gt;    </span></span></span><br><span class="line"><span class="string"><span class="javascript">                    &lt;button v-on:click=&quot;hideBtnClick&quot;&gt;显示/隐藏套餐&lt;/button&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">                &lt;/div&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">            &lt;/div&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">        `</span> <span class="comment">//字面量 双括号 放JS表达式或者变量</span></span></span><br><span class="line"><span class="javascript">    &#125;).mount(<span class="string">&quot;#app&quot;</span>)</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

        <h3 id="data-中可以放多个数据"   >
          <a href="#data-中可以放多个数据" class="heading-link"><i class="fas fa-link"></i></a><a href="#data-中可以放多个数据" class="headerlink" title="data(){} 中可以放多个数据"></a>data(){} 中可以放多个数据</h3>
      
        <h3 id="template-波浪中可以放多行的-前端代码"   >
          <a href="#template-波浪中可以放多行的-前端代码" class="heading-link"><i class="fas fa-link"></i></a><a href="#template-波浪中可以放多行的-前端代码" class="headerlink" title="template: ``波浪中可以放多行的 前端代码"></a>template: ``波浪中可以放多行的 前端代码</h3>
      
        <h3 id="v-on-click-”function”-指定点击事件"   >
          <a href="#v-on-click-”function”-指定点击事件" class="heading-link"><i class="fas fa-link"></i></a><a href="#v-on-click-”function”-指定点击事件" class="headerlink" title="v-on:click=”function” 指定点击事件"></a>v-on:click=”function” 指定点击事件</h3>
      
        <h3 id="当变量boolData为真时-变量data才会显示出来"   >
          <a href="#当变量boolData为真时-变量data才会显示出来" class="heading-link"><i class="fas fa-link"></i></a><a href="#当变量boolData为真时-变量data才会显示出来" class="headerlink" title="  当变量boolData为真时 变量data才会显示出来"></a><div v-if="boolData"><div>  当变量boolData为真时 变量data才会显示出来</h3>
      
        <h3 id="parseInt-val-可以将val值转换为数值型数据"   >
          <a href="#parseInt-val-可以将val值转换为数值型数据" class="heading-link"><i class="fas fa-link"></i></a><a href="#parseInt-val-可以将val值转换为数值型数据" class="headerlink" title="parseInt(val) 可以将val值转换为数值型数据"></a>parseInt(val) 可以将val值转换为数值型数据</h3>
      
        <h2 id="for循环增加佳丽（技师）"   >
          <a href="#for循环增加佳丽（技师）" class="heading-link"><i class="fas fa-link"></i></a><a href="#for循环增加佳丽（技师）" class="headerlink" title="for循环增加佳丽（技师）"></a>for循环增加佳丽（技师）</h2>
      <figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>for循环遍历佳丽<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/vue@next&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="handlebars"><span class="xml"></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    Vue.createApp(&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        data()&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            return &#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                waitresses: [&#x27;小红&#x27;, &#x27;小丽&#x27;, &#x27;小芳&#x27;]</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            &#125;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        &#125;,</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        methods:&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars"></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        &#125;,</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        template: </span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        `   </span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                        <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(waitress, index) of waitresses&quot;</span>&gt;</span>[</span><span class="template-variable">&#123;&#123;<span class="name">index</span>&#125;&#125;</span><span class="xml">]</span><span class="template-variable">&#123;&#123;<span class="name">waitress</span>&#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span>    </span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        ` </span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    &#125;).mount(&quot;#app&quot;)</span></span></span><br><span class="line"><span class="xml"><span class="handlebars"></span></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

        <h4 id="v-for-”-item-index-of-list”-属性-代表从数组list中遍历每个item且附上索引-index"   >
          <a href="#v-for-”-item-index-of-list”-属性-代表从数组list中遍历每个item且附上索引-index" class="heading-link"><i class="fas fa-link"></i></a><a href="#v-for-”-item-index-of-list”-属性-代表从数组list中遍历每个item且附上索引-index" class="headerlink" title="v-for=”(item, index) of list” 属性 代表从数组list中遍历每个item且附上索引 index"></a>v-for=”(item, index) of list” 属性 代表从数组list中遍历每个item且附上索引 index</h4>
      
        <h2 id="将手动输入的值-添加佳丽"   >
          <a href="#将手动输入的值-添加佳丽" class="heading-link"><i class="fas fa-link"></i></a><a href="#将手动输入的值-添加佳丽" class="headerlink" title="将手动输入的值 添加佳丽"></a>将手动输入的值 添加佳丽</h2>
      <figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>手动输入增加佳丽数据<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/vue@next&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="handlebars"><span class="xml"></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    Vue.createApp(&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        data()&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            return &#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                waitresses: [&#x27;小红&#x27;, &#x27;小丽&#x27;, &#x27;小芳&#x27;],</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                inputWaitress:&#x27;&#x27;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            &#125;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        &#125;,</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        methods:&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            addWaitress()&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                this.waitresses.push(this.inputWaitress)                </span></span></span><br><span class="line"><span class="xml"><span class="handlebars">				this.inputWaitress = &#x27;&#x27;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            &#125;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        &#125;,</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        template: //波浪 代表多行 v-on:click=&quot;&quot; 表示对某个标签绑定某个函数 </span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                  //</span><span class="template-variable">&#123;&#123;<span class="name">content可以看做是数据绑定</span> 从data中取出的数据&#125;&#125;</span><span class="xml"></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        `   </span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                    <span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">&quot;inputWaitress&quot;</span> /&gt;</span> <span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">&quot;addWaitress&quot;</span>&gt;</span>增加技师<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars"></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                        <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(waitress, index) of waitresses&quot;</span>&gt;</span>[</span><span class="template-variable">&#123;&#123;<span class="name">index</span>&#125;&#125;</span><span class="xml">]</span><span class="template-variable">&#123;&#123;<span class="name">waitress</span>&#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span>    </span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        ` //字面量 双括号 放JS表达式或者变量</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    &#125;).mount(&quot;#app&quot;)</span></span></span><br><span class="line"><span class="xml"><span class="handlebars"></span></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

        <h4 id="v-model-”stringVal”-定义输入的值-传给变量stringVal"   >
          <a href="#v-model-”stringVal”-定义输入的值-传给变量stringVal" class="heading-link"><i class="fas fa-link"></i></a><a href="#v-model-”stringVal”-定义输入的值-传给变量stringVal" class="headerlink" title="v-model=”stringVal” 定义输入的值 传给变量stringVal"></a>v-model=”stringVal” 定义输入的值 传给变量stringVal</h4>
      
        <h4 id="同时给按钮绑定函数-将对应输入的值-尾添至数组中（同时输入框值清空）"   >
          <a href="#同时给按钮绑定函数-将对应输入的值-尾添至数组中（同时输入框值清空）" class="heading-link"><i class="fas fa-link"></i></a><a href="#同时给按钮绑定函数-将对应输入的值-尾添至数组中（同时输入框值清空）" class="headerlink" title="同时给按钮绑定函数 将对应输入的值 尾添至数组中（同时输入框值清空）"></a>同时给按钮绑定函数 将对应输入的值 尾添至数组中（同时输入框值清空）</h4>
      
        <h1 id="Vue重要概念：组件式开发"   >
          <a href="#Vue重要概念：组件式开发" class="heading-link"><i class="fas fa-link"></i></a><a href="#Vue重要概念：组件式开发" class="headerlink" title="Vue重要概念：组件式开发"></a>Vue重要概念：组件式开发</h1>
      
        <h3 id="什么是组件？组件就像是-“网页窗体中-一个又一个不同的Section”-网页上所看到的任何东西-都可以写成组件"   >
          <a href="#什么是组件？组件就像是-“网页窗体中-一个又一个不同的Section”-网页上所看到的任何东西-都可以写成组件" class="heading-link"><i class="fas fa-link"></i></a><a href="#什么是组件？组件就像是-“网页窗体中-一个又一个不同的Section”-网页上所看到的任何东西-都可以写成组件" class="headerlink" title="什么是组件？组件就像是 “网页窗体中-一个又一个不同的Section” 网页上所看到的任何东西 都可以写成组件"></a>什么是组件？组件就像是 “网页窗体中-一个又一个不同的Section” 网页上所看到的任何东西 都可以写成组件</h3>
      
        <h3 id="比如在上个例子中的-gt-增加佳丽-就可以利用这种思想来-gt-组件式开发"   >
          <a href="#比如在上个例子中的-gt-增加佳丽-就可以利用这种思想来-gt-组件式开发" class="heading-link"><i class="fas fa-link"></i></a><a href="#比如在上个例子中的-gt-增加佳丽-就可以利用这种思想来-gt-组件式开发" class="headerlink" title="比如在上个例子中的-&gt;增加佳丽 就可以利用这种思想来-&gt; 组件式开发"></a>比如在上个例子中的-&gt;增加佳丽 就可以利用这种思想来-&gt; 组件式开发</h3>
      
        <h3 id="把可以抽出来或者说可能重复被用到的代码块-抽离出来"   >
          <a href="#把可以抽出来或者说可能重复被用到的代码块-抽离出来" class="heading-link"><i class="fas fa-link"></i></a><a href="#把可以抽出来或者说可能重复被用到的代码块-抽离出来" class="headerlink" title="把可以抽出来或者说可能重复被用到的代码块 抽离出来"></a>把可以抽出来或者说可能重复被用到的代码块 抽离出来</h3>
      
        <h2 id="小案例：组件式开发-洗脚城系统"   >
          <a href="#小案例：组件式开发-洗脚城系统" class="heading-link"><i class="fas fa-link"></i></a><a href="#小案例：组件式开发-洗脚城系统" class="headerlink" title="小案例：组件式开发-洗脚城系统"></a>小案例：组件式开发-洗脚城系统</h2>
      <figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>手动输入增加佳丽数据<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/vue@next&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="handlebars"><span class="xml"></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    //app是一个可以将自己的内容 挂载在id为app区域上的变量</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    const app = Vue.createApp(&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        data()&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            return &#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                waitresses:[&#x27;小红&#x27;, &#x27;小芳&#x27;, &#x27;小丽&#x27;],</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                inputValue:&#x27; &#x27;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            &#125;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        &#125;,</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        methods:&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            add()&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                this.waitresses.push(this.inputValue)</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                this.inputValue = &#x27; &#x27;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            &#125;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        &#125;,</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        template: `</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            <span class="tag">&lt;<span class="name">my-title</span>/&gt;</span>   </span></span></span><br><span class="line"><span class="xml"><span class="handlebars"></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">&quot;inputWaitress&quot;</span>/&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            <span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">&quot;add&quot;</span>&gt;</span>添加佳丽<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars"></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                    <span class="tag">&lt;<span class="name">my-waitress</span> </span></span></span></span><br><span class="line"><span class="tag"><span class="xml"><span class="handlebars">                        <span class="attr">v-for</span>=<span class="string">&quot;(item, index) of waitresses&quot;</span></span></span></span></span><br><span class="line"><span class="tag"><span class="xml"><span class="handlebars">                        <span class="attr">v-bind:item</span>=<span class="string">&quot;item&quot;</span></span></span></span></span><br><span class="line"><span class="tag"><span class="xml"><span class="handlebars">                        <span class="attr">v-bind:index</span>=<span class="string">&quot;index&quot;</span></span></span></span></span><br><span class="line"><span class="tag"><span class="xml"><span class="handlebars">                    /&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                <span class="tag">&lt;/<span class="name">ul</span>&gt;</span>    </span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        `</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    &#125;)</span></span></span><br><span class="line"><span class="xml"><span class="handlebars"> </span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    app.component(&#x27;my-title&#x27;,&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        template:&#x27;<span class="tag">&lt;<span class="name">h1</span> <span class="attr">style</span>=<span class="string">&quot;text-align=center&quot;</span>&gt;</span>洗脚城<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>&#x27;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    &#125;)</span></span></span><br><span class="line"><span class="xml"><span class="handlebars"></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    //抽离出上个例子中 动态地渲染 参数为props列表中的值</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    app.component(&#x27;my-waitress&#x27;, &#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        props:[&#x27;item&#x27;, &#x27;index&#x27;],</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        template:`<span class="tag">&lt;<span class="name">li</span>&gt;</span>[</span><span class="template-variable">&#123;&#123;<span class="name">index</span>&#125;&#125;</span><span class="xml">] </span><span class="template-variable">&#123;&#123;<span class="name">item</span>&#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">li</span>&gt;</span>`</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    &#125;)</span></span></span><br><span class="line"><span class="xml"><span class="handlebars"></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    app.mount(&quot;#app&quot;)</span></span></span><br><span class="line"><span class="xml"><span class="handlebars"></span></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

        <h2 id="VUE的组件式开发之总结："   >
          <a href="#VUE的组件式开发之总结：" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE的组件式开发之总结：" class="headerlink" title="VUE的组件式开发之总结："></a>VUE的组件式开发之总结：</h2>
      <ol>
<li>在代码中，首先将app作为一个const常量（不可更改） 创建出来-&gt;  const app = Vue.createApp({})</li>
<li>然后编写这个app常量的各个组件- app.component(‘name’,{data})</li>
<li>….重复编写组件</li>
<li>最后选择把这个app挂载在 网页中的某个区域（可以id选择器，class选择器等..) app.mount(“#id_name”)</li>
</ol>

        <h3 id="重要属性"   >
          <a href="#重要属性" class="heading-link"><i class="fas fa-link"></i></a><a href="#重要属性" class="headerlink" title="重要属性:"></a>重要属性:</h3>
      
        <h4 id="1-组件中的template-’’-分别填写单行、多行HTML"   >
          <a href="#1-组件中的template-’’-分别填写单行、多行HTML" class="heading-link"><i class="fas fa-link"></i></a><a href="#1-组件中的template-’’-分别填写单行、多行HTML" class="headerlink" title="1.组件中的template:’’/ ``分别填写单行、多行HTML"></a>1.组件中的template:’’/ ``分别填写单行、多行HTML</h4>
      
        <h4 id="2-v-on-click-”fun-name”-绑定单击事件"   >
          <a href="#2-v-on-click-”fun-name”-绑定单击事件" class="heading-link"><i class="fas fa-link"></i></a><a href="#2-v-on-click-”fun-name”-绑定单击事件" class="headerlink" title="2.v-on:click=”fun_name” 绑定单击事件"></a>2.v-on:click=”fun_name” 绑定单击事件</h4>
      
        <h4 id="3-v-for-”-item-index-of-list”-利用for循环遍历数组"   >
          <a href="#3-v-for-”-item-index-of-list”-利用for循环遍历数组" class="heading-link"><i class="fas fa-link"></i></a><a href="#3-v-for-”-item-index-of-list”-利用for循环遍历数组" class="headerlink" title="3.v-for=”(item, index) of list” 利用for循环遍历数组"></a>3.v-for=”(item, index) of list” 利用for循环遍历数组</h4>
      
        <h4 id="4-v-bind-gt-绑定这个自定义组件中的props参数数组中的参数"   >
          <a href="#4-v-bind-gt-绑定这个自定义组件中的props参数数组中的参数" class="heading-link"><i class="fas fa-link"></i></a><a href="#4-v-bind-gt-绑定这个自定义组件中的props参数数组中的参数" class="headerlink" title="4.v.bind-&gt;绑定这个自定义组件中的props参数数组中的参数"></a>4.v.bind-&gt;绑定这个自定义组件中的props参数数组中的参数</h4>
      
        <h2 id="VUE的createApp-方法-与-mount-方法讲解"   >
          <a href="#VUE的createApp-方法-与-mount-方法讲解" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE的createApp-方法-与-mount-方法讲解" class="headerlink" title="VUE的createApp()方法 与 mount()方法讲解"></a>VUE的createApp()方法 与 mount()方法讲解</h2>
      <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> app = Vue.createApp(&#123;&#125;)</span><br><span class="line">app.mount(<span class="string">&quot;#app&quot;</span>)</span><br></pre></td></tr></table></div></figure>

<ol>
<li>createApp就是<strong>Vue创建一个应用</strong></li>
<li>mount方法就是<strong>挂载到某一个DOM节点</strong>上</li>
</ol>

        <h2 id="VUE的设计模式：mvvm-gt-model-view-viewModel"   >
          <a href="#VUE的设计模式：mvvm-gt-model-view-viewModel" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE的设计模式：mvvm-gt-model-view-viewModel" class="headerlink" title="VUE的设计模式：mvvm-&gt;model, view, viewModel"></a>VUE的设计模式：mvvm-&gt;model, view, viewModel</h2>
      <p>Vue的编程设计模式应该叫做mvvm的设计模式。什么叫做mvvm？它首先是面向数据的编程，程序中定义了数据，然后定义了模板，Vue就可以把数据和模板自动进行关联。最后挂载到真实的DOM上，展示给用户。</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mvvm解释: 第一个m代表model数据，第一个v代表view视图，最后两个字幕vm代表viewModel视图数据连接层。</span><br></pre></td></tr></table></div></figure>


        <h3 id="小案例认识-“数据”-“模板”-“数据视图连接层”"   >
          <a href="#小案例认识-“数据”-“模板”-“数据视图连接层”" class="heading-link"><i class="fas fa-link"></i></a><a href="#小案例认识-“数据”-“模板”-“数据视图连接层”" class="headerlink" title="小案例认识 “数据” “模板” “数据视图连接层”"></a>小案例认识 “数据” “模板” “数据视图连接层”</h3>
      <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">                <span class="attr">message</span>: <span class="string">&#x27;vincent99013.github.io&#x27;</span>   <span class="comment">//1.在这里定义了数据，也就是`model`数据</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>: <span class="string">&quot;&lt;h2&gt;&#123;&#123;message&#125;&#125;&lt;/h2&gt;&quot;</span> <span class="comment">//2.在这里定义了模板，也就是`view`，</span></span><br><span class="line">        <span class="comment">//定义后的自动关联，就叫做`vm`，viewModel数据视图连接层。</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>
<ol>
<li>data(){} 中放数据</li>
<li>template:”” 中放模板view 即HTML代码</li>
<li>使得数据与视图之间得以连接</li>
</ol>
<p>model数据，是我们自己定义的，view模板也是我们自己定义的，但是vm是Vue自动给我们关联的。</p>
<p>当我们明白了什么是mvvm后，你就知道为什么我们给根组件起名vm了。</p>
<p>当我们获取了vm根节点后，其实就可以操作里边的数据了。比如在控制台中输入下面的代码：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vm.$data.message = <span class="string">&#x27;vincent&#x27;</span></span><br></pre></td></tr></table></div></figure>

<p>如果在app里 我们使用this指针操作data数组中某个变量</p>

        <h2 id="自动执行函数的理解"   >
          <a href="#自动执行函数的理解" class="heading-link"><i class="fas fa-link"></i></a><a href="#自动执行函数的理解" class="headerlink" title="自动执行函数的理解"></a>自动执行函数的理解</h2>
      <p>说起自动执行函数，还要从<strong>被动执行函数</strong>说起。比如给网页某一个元素一个点击事件：</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Demo7<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/vue@next&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">				<span class="attr">message</span>: <span class="string">&#x27;弹窗成功&#x27;</span></span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="javascript">            <span class="function"><span class="title">clickFun</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">                alert(<span class="built_in">this</span>.message)</span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>: <span class="string">`&lt;div&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">                        &lt;button v-on:click=&quot;clickFun&quot;&gt;点击我弹窗（被动事件）&lt;/button&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">                   &lt;/div&gt;`</span></span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript">	app.mount(<span class="string">&quot;#app&quot;</span>)</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

<p>在面向数据编程中，此时给该按钮加入点击事件。<strong>只有当该按钮被点击时，事件才会被触发。这就是被动函数的概念！</strong></p>
<p>而对于自动执行函数..不需要相应的点击事件才触发</p>

        <h2 id="自动执行函数-gt-mounted"   >
          <a href="#自动执行函数-gt-mounted" class="heading-link"><i class="fas fa-link"></i></a><a href="#自动执行函数-gt-mounted" class="headerlink" title="自动执行函数-&gt; mounted()"></a>自动执行函数-&gt; mounted()</h2>
      <figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Demo7<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/vue@next&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">				<span class="attr">message</span>: <span class="string">&#x27;弹窗成功&#x27;</span></span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">		<span class="function"><span class="title">mounted</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			alert(<span class="string">&#x27;自动弹出的内容&#x27;</span>)</span></span><br><span class="line"><span class="javascript">		&#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="javascript">			</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>: <span class="string">`&lt;div&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">						&lt;h1&gt;不用点击 自动弹窗&lt;/h1&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">                   &lt;/div&gt;`</span></span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript">	app.mount(<span class="string">&quot;#app&quot;</span>)</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

<p>在网页加载完成后，自动进入mounted函数中，即自动执行里面的代码块。</p>

        <h2 id="（很重要！）VUE的所有生命周期"   >
          <a href="#（很重要！）VUE的所有生命周期" class="heading-link"><i class="fas fa-link"></i></a><a href="#（很重要！）VUE的所有生命周期" class="headerlink" title="（很重要！）VUE的所有生命周期"></a>（很重要！）VUE的所有生命周期</h2>
      <p><img   src="https://img-blog.csdnimg.cn/20210329210051193.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>

        <h2 id="重要的四个基本生命周期函数"   >
          <a href="#重要的四个基本生命周期函数" class="heading-link"><i class="fas fa-link"></i></a><a href="#重要的四个基本生命周期函数" class="headerlink" title="重要的四个基本生命周期函数"></a>重要的四个基本生命周期函数</h2>
      <ol>
<li>beforeCreate(): 在实例生成之前会自动执行的函数</li>
<li>created(): 在实例生成之后会自动执行的函数</li>
<li>beforeMount(): 在模板渲染完成之前执行的函数</li>
<li>mounted(): 在模板渲染完成之后执行的函数</li>
</ol>
<p>那么，现在用具体的例子来演示一下这四个基本周期函数吧：</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Demo7<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/vue@next&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">				<span class="attr">message</span>: <span class="string">&#x27;弹窗成功&#x27;</span></span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">		<span class="function"><span class="title">beforeCreate</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;beforeCreate&#x27;</span>)</span></span><br><span class="line"><span class="javascript">		&#125;,</span></span><br><span class="line"><span class="javascript">		<span class="function"><span class="title">created</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;created&#x27;</span>)</span></span><br><span class="line"><span class="javascript">		&#125;,</span></span><br><span class="line"><span class="javascript">		<span class="function"><span class="title">beforeMount</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;beforeMount&#x27;</span>)</span></span><br><span class="line"><span class="javascript">		&#125;,</span></span><br><span class="line"><span class="javascript">		<span class="function"><span class="title">mounted</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;mounted&#x27;</span>)</span></span><br><span class="line"><span class="javascript">		&#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="javascript">			</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>: <span class="string">`&lt;div&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">						&lt;h1&gt;不用点击 自动弹窗&lt;/h1&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">                   &lt;/div&gt;`</span></span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript">	app.mount(<span class="string">&quot;#app&quot;</span>)</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

<p>浏览器的控制台：<br><img   src="https://img-blog.csdnimg.cn/20210329210625512.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"><br><strong>可以看到：执行流程是: beforeCreate -&gt; created -&gt; beforeMount -&gt; mounted</strong></p>

        <h2 id="beforeUpdate和updated生命周期函数"   >
          <a href="#beforeUpdate和updated生命周期函数" class="heading-link"><i class="fas fa-link"></i></a><a href="#beforeUpdate和updated生命周期函数" class="headerlink" title="beforeUpdate和updated生命周期函数"></a>beforeUpdate和updated生命周期函数</h2>
      <p>这两个周期函数是在VUE中的data数据发生变化时，才会被执行，<strong>一个是在变化之前，一个是在变化之后。</strong></p>
<p>用一个改变data中变量message的值的例子来说明：</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Demo7<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/vue@next&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">				<span class="attr">message</span>: <span class="string">&#x27;初始值&#x27;</span></span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">		<span class="function"><span class="title">beforeUpdate</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;当前的值未被改变！&#x27;</span>)</span></span><br><span class="line"><span class="javascript">		&#125;,</span></span><br><span class="line"><span class="javascript">		<span class="function"><span class="title">updated</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;当前的值已被改变!&#x27;</span>)</span></span><br><span class="line"><span class="javascript">		&#125;,</span></span><br><span class="line"><span class="javascript">		<span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="javascript">			<span class="function"><span class="title">clickFun</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="built_in">this</span>.message = <span class="string">&#x27;恭喜您，成功更改message的值！&#x27;</span>		</span></span><br><span class="line"><span class="javascript">			&#125;</span></span><br><span class="line"><span class="javascript">		&#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>: <span class="string">`&lt;div&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">						&lt;div&gt;&#123;&#123;message&#125;&#125;&lt;/div&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">						&lt;div&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">							&lt;button v-on:click=&quot;clickFun&quot;&gt;点击改变data中的数据值&lt;/button&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">						&lt;/div&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">                   &lt;/div&gt;`</span></span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript">	app.mount(<span class="string">&quot;#app&quot;</span>)</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></div></figure>


        <h2 id="beforeUnmount和unmounted周期函数"   >
          <a href="#beforeUnmount和unmounted周期函数" class="heading-link"><i class="fas fa-link"></i></a><a href="#beforeUnmount和unmounted周期函数" class="headerlink" title="beforeUnmount和unmounted周期函数"></a>beforeUnmount和unmounted周期函数</h2>
      <p>这两个生命周期函数是在VUE销毁时自动执行的函数，一个是销毁前执行，一个是销毁后执行。<br>beforeUnmount(): 当VUE应用失效时，会自动执行。<br>unmounted():当VUE应用失效，且DOM完全销毁之后，会自动执行。</p>
<p>代码演示如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">				<span class="attr">message</span>: <span class="string">&#x27;初始值&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">		<span class="function"><span class="title">beforeUnmount</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="built_in">console</span>.log(<span class="string">&#x27;beforeUnmount！&#x27;</span>)</span><br><span class="line">		&#125;,</span><br><span class="line">		<span class="function"><span class="title">unmounted</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="built_in">console</span>.log(<span class="string">&#x27;unmounted!&#x27;</span>)</span><br><span class="line">		&#125;,</span><br><span class="line">		<span class="attr">methods</span>: &#123;</span><br><span class="line">			<span class="function"><span class="title">clickFun</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.message = <span class="string">&#x27;恭喜您，成功更改message的值！&#x27;</span>		</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">        <span class="attr">template</span>: <span class="string">`&lt;div&gt;</span></span><br><span class="line"><span class="string">						</span></span><br><span class="line"><span class="string">                   &lt;/div&gt;`</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">	app.unmount()</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>

<p>可以看到，页面在调用unmount函数前后，控制台会打印：<br><img   src="https://img-blog.csdnimg.cn/20210330090649903.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"><br>在<strong>app.unmount()<strong>函数执行后，在</strong>beforeUnmount()<strong>方法里，DOM还是有内容的，然后到了</strong>unmounted</strong>方法中，就已经没有任何的DOM内容了。</p>

        <h2 id="VUE中最重要的概念-八大生命周期"   >
          <a href="#VUE中最重要的概念-八大生命周期" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE中最重要的概念-八大生命周期" class="headerlink" title="VUE中最重要的概念-八大生命周期"></a>VUE中最重要的概念-八大生命周期</h2>
      
        <h3 id="创建，挂载，更改，非挂载"   >
          <a href="#创建，挂载，更改，非挂载" class="heading-link"><i class="fas fa-link"></i></a><a href="#创建，挂载，更改，非挂载" class="headerlink" title="创建，挂载，更改，非挂载"></a>创建，挂载，更改，非挂载</h3>
      <p>记住八大生命周期，可回想安卓中的生命周期函数！<br>各有两个<strong>un-XX</strong>与<strong>xx-ed</strong></p>
<p>如图所示：<br><img   src="https://img-blog.csdnimg.cn/20210330091336939.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>

        <h2 id="插值表达式与v-bind数据绑定"   >
          <a href="#插值表达式与v-bind数据绑定" class="heading-link"><i class="fas fa-link"></i></a><a href="#插值表达式与v-bind数据绑定" class="headerlink" title="插值表达式与v-bind数据绑定"></a>插值表达式与v-bind数据绑定</h2>
      <p>在之前的代码类似 <strong>content</strong> 这种，正确叫法是 <strong>插值表达式</strong> 当然也可以叫做 <strong>字面量</strong></p>
<p>JSP中从后台SpringMVC中的ModelAndView中存储的数据 利用EL表示JSP网页取值一样</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;<span class="attr">message</span>: <span class="string">&#x27;数据&#x27;</span>&#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>: <span class="string">&quot;&lt;div&gt;&#123;&#123;message&#125;&#125;&lt;/div&gt;&quot;</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>

<p>在以上代码中，我们利用面向数据编程的<strong>插值表达式</strong>  在模板template当中显示出data数组中的数据。</p>
<p>但有时可能我们需要显示的一些数据变量，中含有HTML标签，我们想<strong>在网页中以标签的形式显示出来而不是字符串的内容（即不会把&lt;&gt;这样的内容也显示出来），这样我们就需要用到</strong> v-html=”message” ，<strong>需要注意的是，我们需要用多行代码块`而不是单行代码块”</strong></p>
<p>具体代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">				<span class="attr">message</span>: <span class="string">&#x27;&lt;i&gt;斜体的内容（不含标签）&lt;i&gt;&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>: <span class="string">`&lt;div v-html=&quot;message&quot;&gt;&lt;/div&gt;`</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h2 id="VUE中的数据双向绑定"   >
          <a href="#VUE中的数据双向绑定" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE中的数据双向绑定" class="headerlink" title="VUE中的数据双向绑定"></a>VUE中的数据双向绑定</h2>
      <p>在模板template中引用的data数据，被绑定到模板对应mount挂载的网页区域中。当data中的数据发生改变时，对应网页中显示出来的内容也会发生改变。这就是双向数据绑定，<strong>而有时我们只需要这样的数据，让它只在第一次渲染出来，而之后不再跟随data中的数据的值变化而变化。</strong>这样的思想，我们可以用v-once属性完成！</p>
<p>代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">				<span class="attr">message</span>: <span class="string">&#x27;message数据的初始内容&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">		<span class="attr">methods</span>:&#123;</span><br><span class="line">			<span class="function"><span class="title">fun</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.message = <span class="string">&#x27;更改数据中...&#x27;</span></span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">        <span class="attr">template</span>: <span class="string">`</span></span><br><span class="line"><span class="string">		&lt;div&gt;</span></span><br><span class="line"><span class="string">			&lt;div v-once&gt;只会显示初始数据：&#123;&#123;message&#125;&#125;&lt;/div&gt;</span></span><br><span class="line"><span class="string">			&lt;div&gt;&lt;button v-on:click=&quot;fun&quot;&gt;点击我但不会改变message的初始值&lt;/button&gt;					&lt;/div&gt;</span></span><br><span class="line"><span class="string">		&lt;/div&gt;`</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>

<p>在上述代码中，我们无论点击多少次按钮，带有v-once属性的div中的字面量数据，绝对不会再次渲染新值</p>

        <h2 id="插值表达式中-使用JS代码（三目运算）"   >
          <a href="#插值表达式中-使用JS代码（三目运算）" class="heading-link"><i class="fas fa-link"></i></a><a href="#插值表达式中-使用JS代码（三目运算）" class="headerlink" title="插值表达式中-使用JS代码（三目运算）"></a>插值表达式中-使用JS代码（三目运算）</h2>
      <p>比如我们要实现这么一个功能：这里有一个灯（不是开着的，就是关着的），我们利用嵌入JS代码至插值表达式中，实现开关灯。</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">				<span class="attr">Switch</span>: <span class="literal">true</span> <span class="comment">//我们默认灯是开着的</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">		<span class="attr">methods</span>:&#123;</span><br><span class="line">			<span class="function"><span class="title">fun</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.Switch = !<span class="built_in">this</span>.Switch <span class="comment">//点击一下 就改变一下灯的状态</span></span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">        <span class="attr">template</span>: <span class="string">`</span></span><br><span class="line"><span class="string">		&lt;div&gt;</span></span><br><span class="line"><span class="string">			&lt;div&gt;状态：&#123;&#123;Switch? &#x27;灯已关闭&#x27;: &#x27;灯已打开&#x27;&#125;&#125;&lt;/div&gt;</span></span><br><span class="line"><span class="string">			&lt;div&gt;&lt;button v-on:click=&quot;fun&quot;&gt;开关灯&lt;/button&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">		&lt;/div&gt;`</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>

<p><strong>在某些情况下，我们需要这种“非真即假”的场景，来为我们改变一些元素的状态！</strong></p>

        <h2 id="v-bind-给某个元素绑定属性"   >
          <a href="#v-bind-给某个元素绑定属性" class="heading-link"><i class="fas fa-link"></i></a><a href="#v-bind-给某个元素绑定属性" class="headerlink" title="v-bind 给某个元素绑定属性"></a>v-bind 给某个元素绑定属性</h2>
      <p>假设我们data数组中有message这个数据，而我们想要某个元素有一个title属性，同时这个<strong>title</strong>的值为message的值。（联想我们插入HTML标签，而不是标签变成了字符串）</p>
<p>代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">				<span class="attr">message</span>: <span class="string">&#x27;数据内容&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>: <span class="string">`</span></span><br><span class="line"><span class="string">		&lt;div v-bind:title = &quot;message&quot; &gt; &#123;&#123;message&#125;&#125; &lt;/div&gt;`</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>

<p><strong>此时我们将鼠标移到对应的数据内容上，悬停出来的内容即为title，而title的值也是数据内容。说明，我们利用v-bind属性给这个元素赋值了message变量中的内容。</strong><br><img src="https://img-blog.csdnimg.cn/20210330101906688.png" alt="在这里插入图片描述"></p>

        <h2 id="v-on-的基本用法及简写"   >
          <a href="#v-on-的基本用法及简写" class="heading-link"><i class="fas fa-link"></i></a><a href="#v-on-的基本用法及简写" class="headerlink" title="v-on 的基本用法及简写"></a>v-on 的基本用法及简写</h2>
      <p>v-on 是用来绑定响应事件的，在之前提到：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">methods:&#123;</span><br><span class="line">	alert(<span class="string">&#x27;显示数据中...&#x27;</span>)</span><br><span class="line">&#125;,</span><br><span class="line"><span class="attr">template</span>:<span class="string">&quot; &lt;button v-on:click=&quot;</span>fun<span class="string">&quot;&gt;点击我弹窗显示数据&lt;/button&gt; &quot;</span></span><br></pre></td></tr></table></div></figure>

<p><strong>现在可以利用@click来代替：v-on:click事件</strong></p>
<p>也就是说 <strong>@事件=v-on:事件</strong></p>
<p>完整代码：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">				<span class="attr">message</span>: <span class="string">&#x27;数据内容&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">		<span class="attr">methods</span>: &#123;</span><br><span class="line">			<span class="function"><span class="title">fun</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">				alert(<span class="built_in">this</span>.message)</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">        <span class="attr">template</span>: </span><br><span class="line">		<span class="string">`</span></span><br><span class="line"><span class="string">			&lt;button @click=&quot;fun&quot;&gt;点击我弹窗显示数据&lt;/button&gt;</span></span><br><span class="line"><span class="string">		`</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>

<p>效果图如下：<br><img   src="https://img-blog.csdnimg.cn/20210330190500540.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>

        <h2 id="v-bind绑定的基本用法及简写"   >
          <a href="#v-bind绑定的基本用法及简写" class="heading-link"><i class="fas fa-link"></i></a><a href="#v-bind绑定的基本用法及简写" class="headerlink" title="v-bind绑定的基本用法及简写"></a>v-bind绑定的基本用法及简写</h2>
      <p>与v-on一样，v-bind也可以用来绑定属性。基本用法是：</p>
<p>:title=”val_name(变量名)”，即绑定title为data中的变量名。</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">				<span class="attr">message</span>: <span class="string">&#x27;数据内容&#x27;</span>,</span><br><span class="line">				<span class="attr">title</span>: <span class="string">&#x27;:title生成的按钮标题&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">		<span class="attr">methods</span>: &#123;</span><br><span class="line">			<span class="function"><span class="title">fun</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">				alert(<span class="built_in">this</span>.message)</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">        <span class="attr">template</span>: </span><br><span class="line">		<span class="string">`</span></span><br><span class="line"><span class="string">			&lt;button @click=&quot;fun&quot; :title=&quot;title&quot;&gt;点击我弹窗显示数据&lt;/button&gt;</span></span><br><span class="line"><span class="string">		`</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>
<p>效果图如下：<br><img src="https://img-blog.csdnimg.cn/20210330190953268.png" alt="在这里插入图片描述"></p>

        <h2 id="模板动态参数"   >
          <a href="#模板动态参数" class="heading-link"><i class="fas fa-link"></i></a><a href="#模板动态参数" class="headerlink" title="模板动态参数"></a>模板动态参数</h2>
      
        <h3 id="属性动态参数"   >
          <a href="#属性动态参数" class="heading-link"><i class="fas fa-link"></i></a><a href="#属性动态参数" class="headerlink" title="属性动态参数"></a>属性动态参数</h3>
      <p>对于绑定的title属性，我们可以看成是一个动态变量<strong>parameter</strong>里面，赋值为<strong>title</strong>，title的值为相应的变量名。</p>
<p>所以我们可以利用这样的形式来写：<br><strong>简写bind函数时，我们不用title（:title），我们把title抽离出来，看成是一个parameter变量的值</strong></p>
<p>代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">				<span class="attr">message</span>: <span class="string">&#x27;数据内容&#x27;</span>,</span><br><span class="line">				<span class="attr">name</span>: <span class="string">&#x27;title&#x27;</span>,</span><br><span class="line">				<span class="attr">val</span>: <span class="string">&#x27;标题值&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">		<span class="attr">methods</span>: &#123;</span><br><span class="line">			<span class="function"><span class="title">fun</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">				alert(<span class="built_in">this</span>.message)</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">        <span class="attr">template</span>: </span><br><span class="line">		<span class="string">`</span></span><br><span class="line"><span class="string">			&lt;button @click=&quot;fun&quot; :[name]=&quot;val&quot;&gt;点击我弹窗显示数据&lt;/button&gt;</span></span><br><span class="line"><span class="string">		`</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h3 id="事件动态绑定"   >
          <a href="#事件动态绑定" class="heading-link"><i class="fas fa-link"></i></a><a href="#事件动态绑定" class="headerlink" title="事件动态绑定"></a>事件动态绑定</h3>
      <p>与属性动态绑定一样，我们可以<strong>将点击这个动作抽象成一个变量event</strong>，其值为click作为参数。对应的值不变！仍为data中的变量。</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> @[<span class="attr">event</span>]=<span class="string">&quot;fun&quot;</span> <span class="attr">:</span>[<span class="attr">name</span>]=<span class="string">&quot;val&quot;</span>&gt;</span>点击我弹窗显示数据<span class="tag">&lt;/<span class="name">button</span>&gt;</span> </span><br></pre></td></tr></table></div></figure>

<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">				<span class="attr">message</span>: <span class="string">&#x27;数据内容&#x27;</span>,</span><br><span class="line">				<span class="attr">name</span>: <span class="string">&#x27;title&#x27;</span>,</span><br><span class="line">				<span class="attr">val</span>: <span class="string">&#x27;标题值&#x27;</span>,</span><br><span class="line">				<span class="attr">event</span>: <span class="string">&#x27;click&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">		<span class="attr">methods</span>: &#123;</span><br><span class="line">			<span class="function"><span class="title">fun</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">				alert(<span class="built_in">this</span>.message)</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">        <span class="attr">template</span>: </span><br><span class="line">		<span class="string">`</span></span><br><span class="line"><span class="string">			&lt;button @[event]=&quot;fun&quot; :[name]=&quot;val&quot;&gt;点击我弹窗显示数据&lt;/button&gt;</span></span><br><span class="line"><span class="string">		`</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>

<p>通过事件绑定，属性绑定，这样我们可以动态切换对应的事件。只需要更改this.event以及this.parameter的值</p>

        <h2 id="VUE阻止默认事件（比如表单的默认提交）"   >
          <a href="#VUE阻止默认事件（比如表单的默认提交）" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE阻止默认事件（比如表单的默认提交）" class="headerlink" title="VUE阻止默认事件（比如表单的默认提交）"></a>VUE阻止默认事件（比如表单的默认提交）</h2>
      <p>最常见的事件就是阻止表单的默认提交，<strong>比如在表单的数据还没有完全验证成功情况下。是必须阻止表单默认提交的！</strong></p>
<p>通常我们的代码会像这样：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">				<span class="attr">message</span>: <span class="string">&#x27;数据内容&#x27;</span>,</span><br><span class="line">				<span class="attr">name</span>: <span class="string">&#x27;title&#x27;</span>,</span><br><span class="line">				<span class="attr">val</span>: <span class="string">&#x27;标题值&#x27;</span>,</span><br><span class="line">				<span class="attr">event</span>: <span class="string">&#x27;click&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">		<span class="attr">methods</span>: &#123;</span><br><span class="line">			<span class="function"><span class="title">handleButton</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">				e.preventDefault()</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">        <span class="attr">template</span>: </span><br><span class="line">		<span class="string">`</span></span><br><span class="line"><span class="string">			&lt;form action=&quot;https://www.baidu.com&quot;&gt;</span></span><br><span class="line"><span class="string">				&lt;button type=&quot;submit&quot; @click=&quot;handleButton&quot;&gt;提交数据&lt;/button&gt;</span></span><br><span class="line"><span class="string">			&lt;/form&gt;</span></span><br><span class="line"><span class="string">		`</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>

<ol>
<li>我们给一个自定义的阻止事件handleButton(e)</li>
<li>这个e看做是触发事件的<strong>源按钮</strong> 看做是<strong>哪一个按钮触发了这个事件，就指哪一个按钮</strong></li>
<li>调用**e.preventDefault()**函数以阻止默认事件</li>
</ol>
<p><strong>对于那些经常要做的阻止操作而言，这种方法太低效了。</strong></p>
<p>因而，VUE给我们提供了一个<strong>模板修饰符</strong>，直接可以阻止默认行为，写法如下：</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;https://www.baidu.com&quot;</span> @<span class="attr">click.prevent</span>=<span class="string">&quot;handleButton&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span>&gt;</span>提交<span class="tag">&lt;<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></div></figure>
<p>上述代码中:<strong>@click.prevent=”阻止之后 转而进入的事件</strong><br>完整代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">				<span class="attr">message</span>: <span class="string">&#x27;数据内容&#x27;</span>,</span><br><span class="line">				<span class="attr">name</span>: <span class="string">&#x27;title&#x27;</span>,</span><br><span class="line">				<span class="attr">val</span>: <span class="string">&#x27;标题值&#x27;</span>,</span><br><span class="line">				<span class="attr">event</span>: <span class="string">&#x27;click&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">		<span class="attr">methods</span>: &#123;</span><br><span class="line">			<span class="function"><span class="title">handleButton</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">				alert(<span class="string">&#x27;拦截成功...&#x27;</span>)</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">        <span class="attr">template</span>: </span><br><span class="line">		<span class="string">`</span></span><br><span class="line"><span class="string">			&lt;form action=&quot;https://www.baidu.com&quot; @click.prevent=&quot;handleButton&quot;&gt;</span></span><br><span class="line"><span class="string">				&lt;button type=&quot;submit&quot; &gt;提交数据&lt;/button&gt;</span></span><br><span class="line"><span class="string">			&lt;/form&gt;</span></span><br><span class="line"><span class="string">		`</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h2 id="VUE中模板的条件判断-v-if"   >
          <a href="#VUE中模板的条件判断-v-if" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE中模板的条件判断-v-if" class="headerlink" title="VUE中模板的条件判断 v-if"></a>VUE中模板的条件判断 v-if</h2>
      <p>前面我们提到了三目运算符，结合例子说明：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">				<span class="attr">num</span>: <span class="number">10</span>,</span><br><span class="line">				<span class="attr">inputNum</span>:<span class="string">&#x27;&#x27;</span>,</span><br><span class="line">				<span class="attr">flag</span>: <span class="literal">false</span>,</span><br><span class="line">				<span class="attr">message</span>: <span class="string">&#x27;&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">		<span class="attr">methods</span>: &#123;</span><br><span class="line">			<span class="function"><span class="title">handleButton</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.message = (<span class="built_in">parseInt</span>(<span class="built_in">this</span>.inputNum)&gt;<span class="built_in">this</span>.num)? <span class="string">&#x27;你输入的数比10大&#x27;</span>: <span class="string">&#x27;并没有比10大&#x27;</span></span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">        <span class="attr">template</span>: </span><br><span class="line">		<span class="string">`</span></span><br><span class="line"><span class="string">			&lt;input v-model=&quot;inputNum&quot;/&gt;</span></span><br><span class="line"><span class="string">			&lt;button @click=&quot;handleButton&quot;&gt;查询&lt;/button&gt;</span></span><br><span class="line"><span class="string">			&lt;div&gt;&#123;&#123;message&#125;&#125;&lt;/div&gt;</span></span><br><span class="line"><span class="string">		`</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>

<p><strong>当输入的数字大于10或者小于10时 都会提示</strong></p>
<p>现在从这种三目运算符到v-if的过渡：</p>
<p><strong>如果有这么一个场景，当输入的值为“蓝色”时，标签的背景是蓝色，如果是红色，背景是红色。</strong></p>
<p>代码实现如下：</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">				<span class="attr">num</span>: <span class="number">10</span>,</span></span><br><span class="line"><span class="javascript">				<span class="attr">inputValue</span>:<span class="string">&#x27;&#x27;</span>,</span></span><br><span class="line"><span class="javascript">				<span class="attr">flag</span>: <span class="literal">false</span>,</span></span><br><span class="line"><span class="javascript">				<span class="attr">message</span>: <span class="string">&#x27;&#x27;</span></span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">		<span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="javascript">			<span class="function"><span class="title">handleButton</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="built_in">this</span>.message = <span class="built_in">this</span>.inputValue</span></span><br><span class="line"><span class="javascript">			&#125;</span></span><br><span class="line"><span class="javascript">		&#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>: </span></span><br><span class="line"><span class="javascript">		<span class="string">`</span></span></span><br><span class="line"><span class="string"><span class="javascript">			&lt;input v-model=&quot;inputValue&quot;/&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">			&lt;button @click=&quot;handleButton&quot;&gt;查询&lt;/button&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">			&lt;div v-if=&quot;message==&#x27;红色&#x27;&quot; class=&quot;red&quot;&gt;这片区域是红色&lt;/div&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">			&lt;div v-if=&quot;message==&#x27;蓝色&#x27;&quot; class=&quot;blue&quot;&gt;这片区域是蓝色&lt;/div&gt;			</span></span></span><br><span class="line"><span class="string"><span class="javascript">		`</span></span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript">	app.mount(<span class="string">&quot;#app&quot;</span>)</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">	<span class="selector-class">.red</span>&#123;<span class="attribute">color</span>:red&#125;</span></span><br><span class="line"><span class="css">	<span class="selector-class">.blue</span>&#123;<span class="attribute">color</span>:blue&#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></div></figure>


        <h2 id="VUE中的computed域"   >
          <a href="#VUE中的computed域" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE中的computed域" class="headerlink" title="VUE中的computed域"></a>VUE中的computed域</h2>
      <p><strong>对应一般的方法而言，若页面重新渲染；则相应需要计算的方法，会再进行一次计算。</strong></p>
<p>比如，现data数据中有val，和content两个变量；<br>有一个涉及val变量的方法，计算val*10的值。</p>
<p>现在若在普通方法中，更改<strong>同在data中的变量content</strong>，那么val变量会重新计算一遍。</p>
<p>现在将代码放入computed域中，<strong>现在更改content的值时涉及val的方法不会再执行</strong></p>

        <h2 id="VUE中的watch域"   >
          <a href="#VUE中的watch域" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE中的watch域" class="headerlink" title="VUE中的watch域"></a>VUE中的watch域</h2>
      <p>Watch译为监听，则我们可以将一些需要<strong>监听数据变化，并对这些变化作出一些操作的数据源</strong>，<br>放在Watch域中。<strong>而且可以获取到 改变前的值&amp;改变后的值</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">                <span class="attr">num</span>: <span class="number">1</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">computed</span>:&#123;</span><br><span class="line">            </span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">methods</span>:&#123;</span><br><span class="line">            <span class="function"><span class="title">fun</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="built_in">this</span>.num--;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">watch</span>:&#123;</span><br><span class="line">            <span class="function"><span class="title">num</span>(<span class="params">current, prev</span>)</span>&#123;</span><br><span class="line">                alert(<span class="string">&quot;你的num数据从&quot;</span> + prev + <span class="string">&quot;变化到了&quot;</span> + current)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">            &lt;div&gt;&#123;&#123;num&#125;&#125;&lt;/div&gt;</span></span><br><span class="line"><span class="string">            &lt;div&gt;&lt;button @click=&quot;fun&quot;&gt;点我减一&lt;/button&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h2 id="VUE中的模板样式绑定详细讲解"   >
          <a href="#VUE中的模板样式绑定详细讲解" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE中的模板样式绑定详细讲解" class="headerlink" title="VUE中的模板样式绑定详细讲解"></a>VUE中的模板样式绑定详细讲解</h2>
      
        <h3 id="单个样式动态绑定"   >
          <a href="#单个样式动态绑定" class="heading-link"><i class="fas fa-link"></i></a><a href="#单个样式动态绑定" class="headerlink" title="单个样式动态绑定"></a>单个样式动态绑定</h3>
      <p>现有三种样式，我们动态地引用这三个样式：</p>
<figure class="highlight css"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.red</span>&#123;<span class="attribute">color</span>:red&#125;</span><br><span class="line"><span class="selector-class">.green</span>&#123;<span class="attribute">color</span>:green&#125;</span><br><span class="line"><span class="selector-class">.back</span>&#123;<span class="attribute">background-color</span>:orange&#125;</span><br></pre></td></tr></table></div></figure>

<p>完整代码如下：</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span>&#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">className</span>:<span class="string">&#x27;red&#x27;</span></span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>:<span class="string">`</span></span></span><br><span class="line"><span class="string"><span class="javascript">        &lt;h1 :class=&quot;className&quot;&gt;初始字体颜色为红色&lt;/h1&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">        &lt;h2&gt;您可以通过在控制台中修改vm.$data.className来动态引用class&lt;/h2&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">        `</span></span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css"><span class="selector-class">.red</span>&#123;<span class="attribute">color</span>:red&#125;</span></span><br><span class="line"><span class="css"><span class="selector-class">.green</span>&#123;<span class="attribute">color</span>:green&#125;</span></span><br><span class="line"><span class="css"><span class="selector-class">.back</span>&#123;<span class="attribute">background-color</span>: orange;&#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

<p><strong>其中利用动态绑定:class=”className”，而在data中的变量className值代表真正的class值</strong><br>因此，我们可以在控制台中修改：<i>vm.$data.className=’green’</i></p>
<p>使得我们在<strong>style</strong>标签中的CSS样式能够生效。</p>

        <h3 id="对象形式绑定多个样式"   >
          <a href="#对象形式绑定多个样式" class="heading-link"><i class="fas fa-link"></i></a><a href="#对象形式绑定多个样式" class="headerlink" title="对象形式绑定多个样式"></a>对象形式绑定多个样式</h3>
      <p><strong>在上个例子中，我们有字体颜色.red类，有背景颜色.back类</strong><br>现在我们想要绑定这个DOM元素，既让它有样式.red，又让它有样式.back<br>则我们可以利用一个自定义对象classObject，将想要生效的样式置为true</p>
<p>完整代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">                <span class="attr">className</span>:<span class="string">&#x27;red&#x27;</span>,</span><br><span class="line">                <span class="attr">classObject</span>:&#123;<span class="string">&#x27;red&#x27;</span>:<span class="literal">true</span>, <span class="string">&#x27;back&#x27;</span>:<span class="literal">true</span>&#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">        &lt;h1 :class=&quot;cl assObject&quot;&gt;初始字体颜色为红色&lt;/h1&gt;</span></span><br><span class="line"><span class="string">        &lt;h2&gt;您可以通过在控制台中修改vm.$data.className来动态引用class&lt;/h2&gt;</span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>

<p><strong>其中，我们看到，相应的red、back样式类都为true</strong></p>

        <h2 id="VUE中的for循环（以及如何避免重新渲染）"   >
          <a href="#VUE中的for循环（以及如何避免重新渲染）" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE中的for循环（以及如何避免重新渲染）" class="headerlink" title="VUE中的for循环（以及如何避免重新渲染）"></a>VUE中的for循环（以及如何避免重新渲染）</h2>
      <p>在之前的for循环，我们每次都是重新渲染页面：<br><strong>如果有含初始数据的数组，我们只需要重新渲染“新数据”的内容</strong><br>每次添加数据 我们可以避免重新渲染之前的已有数据</p>
<p><strong>利用 :key=”index+item” 绑定key属性！</strong></p>
<p>完整代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">                <span class="attr">list</span>:[<span class="string">&#x27;初始值&#x27;</span>]</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">methods</span>:&#123;</span><br><span class="line">            <span class="function"><span class="title">fun</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="built_in">this</span>.list.push(<span class="string">&#x27;尾添数据&#x27;</span>)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">            &lt;button @click=&quot;fun&quot;&gt;点我&lt;/button&gt;</span></span><br><span class="line"><span class="string">            &lt;ul&gt;</span></span><br><span class="line"><span class="string">                &lt;li v-for=&quot;(item, index) in list&quot; :key=&quot;index+item&quot;&gt; </span></span><br><span class="line"><span class="string">                    [&#123;&#123;index&#125;&#125;]&#123;&#123;item&#125;&#125;</span></span><br><span class="line"><span class="string">                &lt;/li&gt;    </span></span><br><span class="line"><span class="string">            &lt;/ul&gt;</span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h2 id="VUE中的事件对象-event"   >
          <a href="#VUE中的事件对象-event" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE中的事件对象-event" class="headerlink" title="VUE中的事件对象-event"></a>VUE中的事件对象-event</h2>
      
        <h3 id="无参函数"   >
          <a href="#无参函数" class="heading-link"><i class="fas fa-link"></i></a><a href="#无参函数" class="headerlink" title="无参函数"></a>无参函数</h3>
      <script>
    const app = Vue.createApp({
        data(){
            return{
                list:['初始值']
            }
        },
        methods:{
            fun(event){
                console.log(event)
            }
        },
        template:`
            <button @click="fun">点我</button>
           
        `
    })
    const vm = app.mount("#app")
</script>


        <h4 id="tips-我们用event-target看到事件触发源"   >
          <a href="#tips-我们用event-target看到事件触发源" class="heading-link"><i class="fas fa-link"></i></a><a href="#tips-我们用event-target看到事件触发源" class="headerlink" title="tips: 我们用event.target看到事件触发源"></a>tips: 我们用event.target看到事件触发源</h4>
      
        <h3 id="含参函数"   >
          <a href="#含参函数" class="heading-link"><i class="fas fa-link"></i></a><a href="#含参函数" class="headerlink" title="含参函数"></a>含参函数</h3>
      <p><strong>当我们有参数时，调用函数若想用event</strong>，</p>
<p>此时应用<strong>click(para1, para2 …, $event)</strong></p>
<script>
    const app = Vue.createApp({
        data(){
            return{
            }
        },
        methods:{
            fun(num, event){
                alert(++num)
                console.log(event.target)
            }
        },
        template:`
            <button @click="fun(1, $event)">点我+1</button>
           
        `
    })
    const vm = app.mount("#app")
</script>


        <h2 id="VUE中一个按钮绑定两个方法"   >
          <a href="#VUE中一个按钮绑定两个方法" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE中一个按钮绑定两个方法" class="headerlink" title="VUE中一个按钮绑定两个方法"></a>VUE中一个按钮绑定两个方法</h2>
      <p>有时，我们可能需要同时对一个按钮绑定一个事件。<strong>并同时执行两个方法fun1与fun2</strong></p>
<p>**@click=”fun1(), fun2()”**可以完成这个功能。会顺序执行这两个方法！</p>
<p>完整代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">methods</span>:&#123;</span><br><span class="line">            <span class="function"><span class="title">fun1</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                alert(<span class="string">&quot;小明取走100元&quot;</span>)</span><br><span class="line">            &#125;,<span class="function"><span class="title">fun2</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                alert(<span class="string">&quot;银行少了100元&quot;</span>)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">            &lt;button @click=&quot;fun1(), fun2()&quot;&gt;点我交易&lt;/button&gt;</span></span><br><span class="line"><span class="string">           </span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h2 id="VUE中的事件修饰符"   >
          <a href="#VUE中的事件修饰符" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE中的事件修饰符" class="headerlink" title="VUE中的事件修饰符"></a>VUE中的事件修饰符</h2>
      <p><strong>VUE中有六种常见的事件修饰符</strong>他们分别是：</p>
<ol>
<li>stop</li>
<li>prevent</li>
<li>capture</li>
<li>self</li>
<li>once</li>
<li>passive</li>
</ol>

        <h3 id="停止事件的冒泡机制-事件修饰符-click-stop"   >
          <a href="#停止事件的冒泡机制-事件修饰符-click-stop" class="heading-link"><i class="fas fa-link"></i></a><a href="#停止事件的冒泡机制-事件修饰符-click-stop" class="headerlink" title="停止事件的冒泡机制-事件修饰符@click.stop"></a>停止事件的冒泡机制-事件修饰符@click.stop</h3>
      <p><strong>所谓冒泡机制（就像水里面的泡泡，DOM树中的事件就像泡泡一样向上逐个被捕捉！）</strong></p>
<p>比如网页结构是！</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">h2</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">button</span>&gt;</span></span><br><span class="line">...省略闭合标签</span><br></pre></td></tr></table></div></figure>

<p><strong>那么此时给button加的事件，会自底向上得逐个被各个标签捕获</strong><br>也就是说，若给h2添加点击事件，给button添加点击事件。</p>
<p>最终根据冒泡机制，<strong>会执行h2的点击事件</strong>。<br>完整代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">                <span class="attr">count</span>: <span class="number">1</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">methods</span>:&#123;</span><br><span class="line">            <span class="function"><span class="title">divClick</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                alert(<span class="string">&#x27;最终被标签捕捉到了！&#x27;</span>)</span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="function"><span class="title">btnClick</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="built_in">this</span>.count++</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="built_in">this</span>.count)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">            &lt;div @click=&quot;divClick&quot;&gt;</span></span><br><span class="line"><span class="string">                &lt;button @click=&quot;btnClick&quot;&gt;点击我体验冒泡机制&lt;/button&gt;</span></span><br><span class="line"><span class="string">            &lt;/div&gt;    </span></span><br><span class="line"><span class="string">        </span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>

<p>而我们可以用**@click.stop=”btnClick”**给下边的按钮添加，避免它往上冒泡被捕获到。</p>

        <h3 id="prevent修饰符：阻止默然行为的修饰符-click-prevent"   >
          <a href="#prevent修饰符：阻止默然行为的修饰符-click-prevent" class="heading-link"><i class="fas fa-link"></i></a><a href="#prevent修饰符：阻止默然行为的修饰符-click-prevent" class="headerlink" title="prevent修饰符：阻止默然行为的修饰符@click.prevent"></a>prevent修饰符：阻止默然行为的修饰符@click.prevent</h3>
      <p>例如阻止form表单的默认提交行为。</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span> @<span class="attr">click.prevent</span>=<span class="string">&quot;handleButton&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

<p><strong>上述代码可以避免自动form自动提交，转而转向handleButton函数</strong></p>

        <h3 id="capture修饰符，冒泡反方向-自顶向下"   >
          <a href="#capture修饰符，冒泡反方向-自顶向下" class="heading-link"><i class="fas fa-link"></i></a><a href="#capture修饰符，冒泡反方向-自顶向下" class="headerlink" title="capture修饰符，冒泡反方向(自顶向下)"></a>capture修饰符，冒泡反方向(自顶向下)</h3>
      
        <h3 id="once修饰符，事件只执行一次"   >
          <a href="#once修饰符，事件只执行一次" class="heading-link"><i class="fas fa-link"></i></a><a href="#once修饰符，事件只执行一次" class="headerlink" title="once修饰符，事件只执行一次"></a>once修饰符，事件只执行一次</h3>
      <p>once修饰符修饰的事件，只会执行一次。</p>
<p>完整代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">                <span class="attr">count</span>: <span class="number">1</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">methods</span>:&#123;</span><br><span class="line">            <span class="function"><span class="title">divClick</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                alert(<span class="string">&#x27;最终被标签捕捉到了！&#x27;</span>)</span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="function"><span class="title">btnClick</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="built_in">this</span>.count++</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="built_in">this</span>.count)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">            &lt;div @click=&quot;divClick&quot;&gt;</span></span><br><span class="line"><span class="string">                &lt;button @click.once=&quot;btnClick&quot;&gt;只会自增一次&lt;/button&gt;</span></span><br><span class="line"><span class="string">            &lt;/div&gt;    </span></span><br><span class="line"><span class="string">        </span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h3 id="passive修饰符：解决滚动时性能的修饰符"   >
          <a href="#passive修饰符：解决滚动时性能的修饰符" class="heading-link"><i class="fas fa-link"></i></a><a href="#passive修饰符：解决滚动时性能的修饰符" class="headerlink" title="passive修饰符：解决滚动时性能的修饰符"></a>passive修饰符：解决滚动时性能的修饰符</h3>
      
        <h2 id="VUE中的MOUSE、KEYBOARD鼠标-amp-键盘按键绑定"   >
          <a href="#VUE中的MOUSE、KEYBOARD鼠标-amp-键盘按键绑定" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE中的MOUSE、KEYBOARD鼠标-amp-键盘按键绑定" class="headerlink" title="VUE中的MOUSE、KEYBOARD鼠标&amp;键盘按键绑定"></a>VUE中的MOUSE、KEYBOARD鼠标&amp;键盘按键绑定</h2>
      <p><strong>在某种场景下，我们需要按下Enter键登录&amp;注册</strong><br><strong>我们需要在鼠标hover悬停于某个元素上方时，进行交互</strong></p>
<p>这样的操作还涉及到键盘、鼠标之间的事件</p>

        <h3 id="KEYDOWN事件绑定-敲下键盘里的某个键（input属性）"   >
          <a href="#KEYDOWN事件绑定-敲下键盘里的某个键（input属性）" class="heading-link"><i class="fas fa-link"></i></a><a href="#KEYDOWN事件绑定-敲下键盘里的某个键（input属性）" class="headerlink" title="KEYDOWN事件绑定 敲下键盘里的某个键（input属性）"></a>KEYDOWN事件绑定 敲下键盘里的某个键（input属性）</h3>
      <p>在输入框中输入内容时，会触发<strong>keydown</strong>事件</p>
<p>完整代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">                <span class="attr">count</span>: <span class="number">1</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">methods</span>:&#123;</span><br><span class="line">            <span class="function"><span class="title">keyDownHandler</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">&#x27;正在键入....&#x27;</span>)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">            &lt;div &gt;</span></span><br><span class="line"><span class="string">                &lt;input @keydown=&quot;keyDownHandler&quot; /&gt;</span></span><br><span class="line"><span class="string">            &lt;/div&gt;    </span></span><br><span class="line"><span class="string">        </span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h3 id="单个特定键位检测-input属性"   >
          <a href="#单个特定键位检测-input属性" class="heading-link"><i class="fas fa-link"></i></a><a href="#单个特定键位检测-input属性" class="headerlink" title="单个特定键位检测(input属性)"></a>单个特定键位检测(input属性)</h3>
      <p><strong>对于特定的键Enter、Space等键</strong>有时我们会需要检测<br>比如实现表单的Enter提交方式</p>
<p>完整代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">                <span class="attr">count</span>: <span class="number">1</span>,</span><br><span class="line">                <span class="attr">username</span>:<span class="string">&#x27;&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">methods</span>:&#123;</span><br><span class="line">            <span class="function"><span class="title">keyEnterDownHandler</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">&#x27;提交成功！您的数据为&#x27;</span> + <span class="built_in">this</span>.username)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">            &lt;div &gt;</span></span><br><span class="line"><span class="string">                &lt;input @keydown.enter=&quot;keyEnterDownHandler&quot; v-model=&quot;username&quot;/&gt;                </span></span><br><span class="line"><span class="string">            &lt;/div&gt;    </span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">            &lt;div&gt;</span></span><br><span class="line"><span class="string">                &lt;button &gt;提交表单&lt;/button&gt;</span></span><br><span class="line"><span class="string">            &lt;/div&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h1 id="表单的数据双向绑定"   >
          <a href="#表单的数据双向绑定" class="heading-link"><i class="fas fa-link"></i></a><a href="#表单的数据双向绑定" class="headerlink" title="表单的数据双向绑定"></a>表单的数据双向绑定</h1>
      
        <h2 id="什么叫数据的双向绑定？"   >
          <a href="#什么叫数据的双向绑定？" class="heading-link"><i class="fas fa-link"></i></a><a href="#什么叫数据的双向绑定？" class="headerlink" title="什么叫数据的双向绑定？"></a>什么叫数据的双向绑定？</h2>
      <p><strong>所谓数据的双向绑定，就是指：data中的变量val与页面中的字面量相互绑定</strong></p>
<ol>
<li>当data中的val发生改变时 前端页面显示的值会发生变化</li>
<li>当前端中的内容发生变化（比如输入框输入不同的值） 那么data中的内容也会发生变化</li>
</ol>
<p><strong>这种两方中其中一方发生变化，而另一方必然随之变化的过程，称为双向绑定</strong></p>

        <h1 id="表单INPUT-TEXTAREA文本框的绑定"   >
          <a href="#表单INPUT-TEXTAREA文本框的绑定" class="heading-link"><i class="fas fa-link"></i></a><a href="#表单INPUT-TEXTAREA文本框的绑定" class="headerlink" title="表单INPUT TEXTAREA文本框的绑定"></a>表单INPUT TEXTAREA文本框的绑定</h1>
      <p>比如<strong>data</strong>中有一个变量<strong>val</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">return</span>&#123;</span><br><span class="line">		<span class="attr">val</span>:<span class="string">&#x27;&#x27;</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure>

<p>而前端页面中，输入的值赋给<strong>val</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">template:<span class="string">&quot;&lt;input v-model=&quot;</span>val<span class="string">&quot; /&gt;&quot;</span></span><br></pre></td></tr></table></div></figure>

<p>这样，输入不同的前端页面，<strong>data中的val</strong>也会不同！</p>
<ol>
<li>input单行文本框添加**v-model=”val”**属性</li>
<li><strong>textarea</strong>多行文本框同样适用</li>
</ol>

        <h1 id="表单单选框RADIO的绑定"   >
          <a href="#表单单选框RADIO的绑定" class="heading-link"><i class="fas fa-link"></i></a><a href="#表单单选框RADIO的绑定" class="headerlink" title="表单单选框RADIO的绑定"></a>表单单选框RADIO的绑定</h1>
      <p><strong>单选框一般用字符串接收</strong></p>
<p>参与单选框中的v-model对应的data中的字符串变量命名意义是：这些若干同属的类别<br>**比如男、女 其v-model=”gender”**这样命名</p>
<p>其次，应有不同的value属性值来区分这些单选框！</p>
<p>完整代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">                <span class="attr">gender</span>:<span class="string">&#x27;&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">methods</span>:&#123;</span><br><span class="line">            <span class="function"><span class="title">keyEnterDownHandler</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">&#x27;提交成功！您的数据为&#x27;</span> + <span class="built_in">this</span>.username)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">            &lt;div &gt;</span></span><br><span class="line"><span class="string">                &lt;input type=&quot;radio&quot; v-model=&quot;gender&quot;  value=&quot;男&quot;/&gt;男</span></span><br><span class="line"><span class="string">                &lt;br&gt;</span></span><br><span class="line"><span class="string">                &lt;input type=&quot;radio&quot; v-model=&quot;gender&quot; value=&quot;女&quot;/&gt;女             </span></span><br><span class="line"><span class="string">            &lt;/div&gt;    </span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h1 id="表单多选框CHECKBOX的绑定"   >
          <a href="#表单多选框CHECKBOX的绑定" class="heading-link"><i class="fas fa-link"></i></a><a href="#表单多选框CHECKBOX的绑定" class="headerlink" title="表单多选框CHECKBOX的绑定"></a>表单多选框CHECKBOX的绑定</h1>
      <p>对于多选框的每个框<strong>要么属于checked被选中的状态 要么没被选中</strong></p>
<ol>
<li>所以<strong>如果只有一个选项 我们应用Bool值true与false</strong>来确定多选框的选中状态</li>
<li>如果有多个选项，我们**应该用一个数组[]**来装！</li>
</ol>
<p>完整代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">                <span class="attr">gender</span>:<span class="string">&#x27;&#x27;</span>,</span><br><span class="line">                <span class="attr">interests</span>:[]</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">methods</span>:&#123;</span><br><span class="line">            <span class="function"><span class="title">keyEnterDownHandler</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">&#x27;提交成功！您的数据为&#x27;</span> + <span class="built_in">this</span>.username)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">            &lt;div &gt;</span></span><br><span class="line"><span class="string">                &lt;input type=&quot;checkbox&quot; v-model=&quot;interests&quot;  value=&quot;打篮球&quot;/&gt;打篮球</span></span><br><span class="line"><span class="string">                &lt;br&gt;</span></span><br><span class="line"><span class="string">                &lt;input type=&quot;checkbox&quot; v-model=&quot;interests&quot; value=&quot;游泳&quot;/&gt;游泳             </span></span><br><span class="line"><span class="string">            &lt;/div&gt;    </span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h1 id="深入v-model"   >
          <a href="#深入v-model" class="heading-link"><i class="fas fa-link"></i></a><a href="#深入v-model" class="headerlink" title="深入v-model"></a>深入v-model</h1>
      
        <h2 id="1-LAZY-懒显示"   >
          <a href="#1-LAZY-懒显示" class="heading-link"><i class="fas fa-link"></i></a><a href="#1-LAZY-懒显示" class="headerlink" title="1.LAZY 懒显示"></a>1.LAZY 懒显示</h2>
      <p>对于双向绑定，当输入框绑定data中的变量<strong>content</strong>后，如果页面的某一个区域<strong>立即用到了这个content</strong><br>那么在输入的过程中，页面会<strong>实时显示content的值</strong></p>
<p><strong>我们使用 v-model.lazy=”val” 来懒显示，即输入框失去焦点后，内容才会发生变化</strong></p>
<p>代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">                <span class="attr">content</span>:<span class="string">&#x27;&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">            输入框失去焦点才会显示的content：&#123;&#123;content&#125;&#125;</span></span><br><span class="line"><span class="string">            &lt;div &gt;</span></span><br><span class="line"><span class="string">                &lt;input v-model.lazy=&quot;content&quot;/&gt;</span></span><br><span class="line"><span class="string">            &lt;/div&gt;    </span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h2 id="2-NUMBER-输入数字"   >
          <a href="#2-NUMBER-输入数字" class="heading-link"><i class="fas fa-link"></i></a><a href="#2-NUMBER-输入数字" class="headerlink" title="2.NUMBER 输入数字"></a>2.NUMBER 输入数字</h2>
      <p><strong>默认输入的内容是字符串类型 为避免后台转换数字</strong></p>
<p><strong>我们可以使用v-model.number=”val” 来转换成输入绑定data中的变量val</strong></p>
<p>代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">                <span class="attr">content</span>:<span class="string">&#x27;&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">            输入的数据类型是：&#123;&#123;typeof content&#125;&#125;</span></span><br><span class="line"><span class="string">            &lt;div &gt;</span></span><br><span class="line"><span class="string">                年龄：&lt;input v-model.number=&quot;content&quot;/&gt;</span></span><br><span class="line"><span class="string">            &lt;/div&gt;    </span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h2 id="去除前后空格-trim"   >
          <a href="#去除前后空格-trim" class="heading-link"><i class="fas fa-link"></i></a><a href="#去除前后空格-trim" class="headerlink" title="去除前后空格-trim"></a>去除前后空格-trim</h2>
      <p>trim属性用来消除input框输入内容前后的空格的。现在我们再字符串上输入空格，其实它会在DOM元素上进行增加空格的，这个可以在控制台清楚的看出(详细请看视频操作)。 加入trim修饰符后，Vue就会自动给我们去除前后的空格.</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">v-model.trim=<span class="string">&quot;content&quot;</span></span><br></pre></td></tr></table></div></figure></div><footer class="post-footer"><div class="post-ending ending"><div class="ending__text">------ 本文结束，感谢您的阅读 ------</div></div><div class="post-copyright copyright"><div class="copyright-author"><span class="copyright-author__name">本文作者: </span><span class="copyright-author__value"><a href="https://bruce-jj.gitee.io/blog">何水浪</a></span></div><div class="copyright-link"><span class="copyright-link__name">本文链接: </span><span class="copyright-link__value"><a href="https://bruce-jj.gitee.io/blog/2021/03/28/VUE%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95%E5%8F%8A%E7%9B%B8%E5%BA%94%E5%BA%94%E7%94%A8-1/">https://bruce-jj.gitee.io/blog/2021/03/28/VUE%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95%E5%8F%8A%E7%9B%B8%E5%BA%94%E5%BA%94%E7%94%A8-1/</a></span></div><div class="copyright-notice"><span class="copyright-notice__name">版权声明: </span><span class="copyright-notice__value">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en" rel="external nofollow" target="_blank">BY-NC-SA</a> 许可协议。转载请注明出处！</span></div></div><div class="post-tags"><span class="post-tags-item"><span class="post-tags-item__icon"><i class="fas fa-tag"></i></span><a class="post-tags-item__link" href="https://bruce-jj.gitee.io/blog/tags/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6%E5%AD%A6%E4%B9%A0/">前端框架学习</a></span></div><nav class="post-paginator paginator"><div class="paginator-prev"><a class="paginator-prev__link" href="/blog/2021/04/01/VUE%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95%E5%8F%8A%E7%9B%B8%E5%BA%94%E5%BA%94%E7%94%A8-3/"><span class="paginator-prev__icon"><i class="fas fa-angle-left"></i></span><span class="paginator-prev__text">VUE学习笔记-3-SpringBoot+SpringJPA+Vue 开发实战</span></a></div><div class="paginator-next"><a class="paginator-next__link" href="/blog/2021/03/26/%E7%BF%BB%E8%AF%91%E4%BD%9C%E5%93%81-%E5%A6%82%E4%BD%95%E5%83%8F%E6%AF%8D%E8%AF%AD%E8%80%85%E4%B8%80%E6%A0%B7%E8%AF%B4%E8%8B%B1%E8%AF%AD/"><span class="paginator-prev__text">翻译作品--如何像母语者一样说英语</span><span class="paginator-next__icon"><i class="fas fa-angle-right"></i></span></a></div></nav></footer></div></div><div class="comments" id="comments"><div id="valine-container"></div></div></div><div class="sidebar-wrap" id="sidebar-wrap"><aside class="sidebar" id="sidebar"><div class="sidebar-nav"><span class="sidebar-nav-toc current">文章目录</span><span class="sidebar-nav-ov">站点概览</span></div><section class="sidebar-toc"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%9D%A2%E5%90%91%E6%95%B0%E6%8D%AE%E7%BC%96%E7%A8%8B-gt-%E5%AE%9E%E7%8E%B0%E8%AE%A1%E6%97%B6%E5%99%A8"><span class="toc-number">1.</span> <span class="toc-text">
          面向数据编程-&gt;实现计时器</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#mounted-%E8%A1%A8%E7%A4%BA%E5%BD%93%E6%96%87%E6%A1%A3%E5%8A%A0%E8%BD%BD%E6%97%B6-%E5%B0%B1%E6%89%A7%E8%A1%8C%E8%AF%A5%E5%87%BD%E6%95%B0"><span class="toc-number">1.1.</span> <span class="toc-text">
          mounted()表示当文档加载时 就执行该函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#data-%E4%B8%AD%E5%AD%98%E6%94%BE%E7%B1%BB%E4%BC%BC-%E5%85%A8%E5%B1%80%E6%95%B0%E6%8D%AE"><span class="toc-number">1.2.</span> <span class="toc-text">
          data(){}中存放类似 全局数据</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#template-%E6%94%BE%E5%85%A5%E5%85%A8%E5%B1%80%E6%95%B0%E6%8D%AE-%E5%8F%96%E5%80%BC"><span class="toc-number">1.3.</span> <span class="toc-text">
          template:放入全局数据 取值</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%91%E5%AE%9A%E6%95%B0%E6%8D%AE-amp-%E4%BA%8B%E4%BB%B6-gt-%E7%BC%96%E5%86%99%E6%96%B9%E6%B3%95"><span class="toc-number">2.</span> <span class="toc-text">
          绑定数据&amp;事件-&gt;编写方法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#data-%E4%B8%AD%E5%8F%AF%E4%BB%A5%E6%94%BE%E5%A4%9A%E4%B8%AA%E6%95%B0%E6%8D%AE"><span class="toc-number">2.1.</span> <span class="toc-text">
          data(){} 中可以放多个数据</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#template-%E6%B3%A2%E6%B5%AA%E4%B8%AD%E5%8F%AF%E4%BB%A5%E6%94%BE%E5%A4%9A%E8%A1%8C%E7%9A%84-%E5%89%8D%E7%AB%AF%E4%BB%A3%E7%A0%81"><span class="toc-number">2.2.</span> <span class="toc-text">
          template: &#96;&#96;波浪中可以放多行的 前端代码</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#v-on-click-%E2%80%9Dfunction%E2%80%9D-%E6%8C%87%E5%AE%9A%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6"><span class="toc-number">2.3.</span> <span class="toc-text">
          v-on:click&#x3D;”function” 指定点击事件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BD%93%E5%8F%98%E9%87%8FboolData%E4%B8%BA%E7%9C%9F%E6%97%B6-%E5%8F%98%E9%87%8Fdata%E6%89%8D%E4%BC%9A%E6%98%BE%E7%A4%BA%E5%87%BA%E6%9D%A5"><span class="toc-number">2.4.</span> <span class="toc-text">
            当变量boolData为真时 变量data才会显示出来</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#parseInt-val-%E5%8F%AF%E4%BB%A5%E5%B0%86val%E5%80%BC%E8%BD%AC%E6%8D%A2%E4%B8%BA%E6%95%B0%E5%80%BC%E5%9E%8B%E6%95%B0%E6%8D%AE"><span class="toc-number">2.5.</span> <span class="toc-text">
          parseInt(val) 可以将val值转换为数值型数据</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#for%E5%BE%AA%E7%8E%AF%E5%A2%9E%E5%8A%A0%E4%BD%B3%E4%B8%BD%EF%BC%88%E6%8A%80%E5%B8%88%EF%BC%89"><span class="toc-number">3.</span> <span class="toc-text">
          for循环增加佳丽（技师）</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#v-for-%E2%80%9D-item-index-of-list%E2%80%9D-%E5%B1%9E%E6%80%A7-%E4%BB%A3%E8%A1%A8%E4%BB%8E%E6%95%B0%E7%BB%84list%E4%B8%AD%E9%81%8D%E5%8E%86%E6%AF%8F%E4%B8%AAitem%E4%B8%94%E9%99%84%E4%B8%8A%E7%B4%A2%E5%BC%95-index"><span class="toc-number">3.0.1.</span> <span class="toc-text">
          v-for&#x3D;”(item, index) of list” 属性 代表从数组list中遍历每个item且附上索引 index</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B0%86%E6%89%8B%E5%8A%A8%E8%BE%93%E5%85%A5%E7%9A%84%E5%80%BC-%E6%B7%BB%E5%8A%A0%E4%BD%B3%E4%B8%BD"><span class="toc-number">4.</span> <span class="toc-text">
          将手动输入的值 添加佳丽</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#v-model-%E2%80%9DstringVal%E2%80%9D-%E5%AE%9A%E4%B9%89%E8%BE%93%E5%85%A5%E7%9A%84%E5%80%BC-%E4%BC%A0%E7%BB%99%E5%8F%98%E9%87%8FstringVal"><span class="toc-number">4.0.1.</span> <span class="toc-text">
          v-model&#x3D;”stringVal” 定义输入的值 传给变量stringVal</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%90%8C%E6%97%B6%E7%BB%99%E6%8C%89%E9%92%AE%E7%BB%91%E5%AE%9A%E5%87%BD%E6%95%B0-%E5%B0%86%E5%AF%B9%E5%BA%94%E8%BE%93%E5%85%A5%E7%9A%84%E5%80%BC-%E5%B0%BE%E6%B7%BB%E8%87%B3%E6%95%B0%E7%BB%84%E4%B8%AD%EF%BC%88%E5%90%8C%E6%97%B6%E8%BE%93%E5%85%A5%E6%A1%86%E5%80%BC%E6%B8%85%E7%A9%BA%EF%BC%89"><span class="toc-number">4.0.2.</span> <span class="toc-text">
          同时给按钮绑定函数 将对应输入的值 尾添至数组中（同时输入框值清空）</span></a></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Vue%E9%87%8D%E8%A6%81%E6%A6%82%E5%BF%B5%EF%BC%9A%E7%BB%84%E4%BB%B6%E5%BC%8F%E5%BC%80%E5%8F%91"><span class="toc-number"></span> <span class="toc-text">
          Vue重要概念：组件式开发</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E7%BB%84%E4%BB%B6%EF%BC%9F%E7%BB%84%E4%BB%B6%E5%B0%B1%E5%83%8F%E6%98%AF-%E2%80%9C%E7%BD%91%E9%A1%B5%E7%AA%97%E4%BD%93%E4%B8%AD-%E4%B8%80%E4%B8%AA%E5%8F%88%E4%B8%80%E4%B8%AA%E4%B8%8D%E5%90%8C%E7%9A%84Section%E2%80%9D-%E7%BD%91%E9%A1%B5%E4%B8%8A%E6%89%80%E7%9C%8B%E5%88%B0%E7%9A%84%E4%BB%BB%E4%BD%95%E4%B8%9C%E8%A5%BF-%E9%83%BD%E5%8F%AF%E4%BB%A5%E5%86%99%E6%88%90%E7%BB%84%E4%BB%B6"><span class="toc-number">0.1.</span> <span class="toc-text">
          什么是组件？组件就像是 “网页窗体中-一个又一个不同的Section” 网页上所看到的任何东西 都可以写成组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%AF%94%E5%A6%82%E5%9C%A8%E4%B8%8A%E4%B8%AA%E4%BE%8B%E5%AD%90%E4%B8%AD%E7%9A%84-gt-%E5%A2%9E%E5%8A%A0%E4%BD%B3%E4%B8%BD-%E5%B0%B1%E5%8F%AF%E4%BB%A5%E5%88%A9%E7%94%A8%E8%BF%99%E7%A7%8D%E6%80%9D%E6%83%B3%E6%9D%A5-gt-%E7%BB%84%E4%BB%B6%E5%BC%8F%E5%BC%80%E5%8F%91"><span class="toc-number">0.2.</span> <span class="toc-text">
          比如在上个例子中的-&gt;增加佳丽 就可以利用这种思想来-&gt; 组件式开发</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8A%8A%E5%8F%AF%E4%BB%A5%E6%8A%BD%E5%87%BA%E6%9D%A5%E6%88%96%E8%80%85%E8%AF%B4%E5%8F%AF%E8%83%BD%E9%87%8D%E5%A4%8D%E8%A2%AB%E7%94%A8%E5%88%B0%E7%9A%84%E4%BB%A3%E7%A0%81%E5%9D%97-%E6%8A%BD%E7%A6%BB%E5%87%BA%E6%9D%A5"><span class="toc-number">0.3.</span> <span class="toc-text">
          把可以抽出来或者说可能重复被用到的代码块 抽离出来</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B0%8F%E6%A1%88%E4%BE%8B%EF%BC%9A%E7%BB%84%E4%BB%B6%E5%BC%8F%E5%BC%80%E5%8F%91-%E6%B4%97%E8%84%9A%E5%9F%8E%E7%B3%BB%E7%BB%9F"><span class="toc-number">1.</span> <span class="toc-text">
          小案例：组件式开发-洗脚城系统</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#VUE%E7%9A%84%E7%BB%84%E4%BB%B6%E5%BC%8F%E5%BC%80%E5%8F%91%E4%B9%8B%E6%80%BB%E7%BB%93%EF%BC%9A"><span class="toc-number">2.</span> <span class="toc-text">
          VUE的组件式开发之总结：</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%87%8D%E8%A6%81%E5%B1%9E%E6%80%A7"><span class="toc-number">2.1.</span> <span class="toc-text">
          重要属性:</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E7%BB%84%E4%BB%B6%E4%B8%AD%E7%9A%84template-%E2%80%99%E2%80%99-%E5%88%86%E5%88%AB%E5%A1%AB%E5%86%99%E5%8D%95%E8%A1%8C%E3%80%81%E5%A4%9A%E8%A1%8CHTML"><span class="toc-number">2.1.1.</span> <span class="toc-text">
          1.组件中的template:’’&#x2F; &#96;&#96;分别填写单行、多行HTML</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-v-on-click-%E2%80%9Dfun-name%E2%80%9D-%E7%BB%91%E5%AE%9A%E5%8D%95%E5%87%BB%E4%BA%8B%E4%BB%B6"><span class="toc-number">2.1.2.</span> <span class="toc-text">
          2.v-on:click&#x3D;”fun_name” 绑定单击事件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-v-for-%E2%80%9D-item-index-of-list%E2%80%9D-%E5%88%A9%E7%94%A8for%E5%BE%AA%E7%8E%AF%E9%81%8D%E5%8E%86%E6%95%B0%E7%BB%84"><span class="toc-number">2.1.3.</span> <span class="toc-text">
          3.v-for&#x3D;”(item, index) of list” 利用for循环遍历数组</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-v-bind-gt-%E7%BB%91%E5%AE%9A%E8%BF%99%E4%B8%AA%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E4%B8%AD%E7%9A%84props%E5%8F%82%E6%95%B0%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E5%8F%82%E6%95%B0"><span class="toc-number">2.1.4.</span> <span class="toc-text">
          4.v.bind-&gt;绑定这个自定义组件中的props参数数组中的参数</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#VUE%E7%9A%84createApp-%E6%96%B9%E6%B3%95-%E4%B8%8E-mount-%E6%96%B9%E6%B3%95%E8%AE%B2%E8%A7%A3"><span class="toc-number">3.</span> <span class="toc-text">
          VUE的createApp()方法 与 mount()方法讲解</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#VUE%E7%9A%84%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%EF%BC%9Amvvm-gt-model-view-viewModel"><span class="toc-number">4.</span> <span class="toc-text">
          VUE的设计模式：mvvm-&gt;model, view, viewModel</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B0%8F%E6%A1%88%E4%BE%8B%E8%AE%A4%E8%AF%86-%E2%80%9C%E6%95%B0%E6%8D%AE%E2%80%9D-%E2%80%9C%E6%A8%A1%E6%9D%BF%E2%80%9D-%E2%80%9C%E6%95%B0%E6%8D%AE%E8%A7%86%E5%9B%BE%E8%BF%9E%E6%8E%A5%E5%B1%82%E2%80%9D"><span class="toc-number">4.1.</span> <span class="toc-text">
          小案例认识 “数据” “模板” “数据视图连接层”</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%87%AA%E5%8A%A8%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0%E7%9A%84%E7%90%86%E8%A7%A3"><span class="toc-number">5.</span> <span class="toc-text">
          自动执行函数的理解</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%87%AA%E5%8A%A8%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0-gt-mounted"><span class="toc-number">6.</span> <span class="toc-text">
          自动执行函数-&gt; mounted()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%EF%BC%88%E5%BE%88%E9%87%8D%E8%A6%81%EF%BC%81%EF%BC%89VUE%E7%9A%84%E6%89%80%E6%9C%89%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-number">7.</span> <span class="toc-text">
          （很重要！）VUE的所有生命周期</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%87%8D%E8%A6%81%E7%9A%84%E5%9B%9B%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%87%BD%E6%95%B0"><span class="toc-number">8.</span> <span class="toc-text">
          重要的四个基本生命周期函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#beforeUpdate%E5%92%8Cupdated%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%87%BD%E6%95%B0"><span class="toc-number">9.</span> <span class="toc-text">
          beforeUpdate和updated生命周期函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#beforeUnmount%E5%92%8Cunmounted%E5%91%A8%E6%9C%9F%E5%87%BD%E6%95%B0"><span class="toc-number">10.</span> <span class="toc-text">
          beforeUnmount和unmounted周期函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#VUE%E4%B8%AD%E6%9C%80%E9%87%8D%E8%A6%81%E7%9A%84%E6%A6%82%E5%BF%B5-%E5%85%AB%E5%A4%A7%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-number">11.</span> <span class="toc-text">
          VUE中最重要的概念-八大生命周期</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA%EF%BC%8C%E6%8C%82%E8%BD%BD%EF%BC%8C%E6%9B%B4%E6%94%B9%EF%BC%8C%E9%9D%9E%E6%8C%82%E8%BD%BD"><span class="toc-number">11.1.</span> <span class="toc-text">
          创建，挂载，更改，非挂载</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8F%92%E5%80%BC%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%B8%8Ev-bind%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A"><span class="toc-number">12.</span> <span class="toc-text">
          插值表达式与v-bind数据绑定</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#VUE%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A"><span class="toc-number">13.</span> <span class="toc-text">
          VUE中的数据双向绑定</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8F%92%E5%80%BC%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%B8%AD-%E4%BD%BF%E7%94%A8JS%E4%BB%A3%E7%A0%81%EF%BC%88%E4%B8%89%E7%9B%AE%E8%BF%90%E7%AE%97%EF%BC%89"><span class="toc-number">14.</span> <span class="toc-text">
          插值表达式中-使用JS代码（三目运算）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#v-bind-%E7%BB%99%E6%9F%90%E4%B8%AA%E5%85%83%E7%B4%A0%E7%BB%91%E5%AE%9A%E5%B1%9E%E6%80%A7"><span class="toc-number">15.</span> <span class="toc-text">
          v-bind 给某个元素绑定属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#v-on-%E7%9A%84%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95%E5%8F%8A%E7%AE%80%E5%86%99"><span class="toc-number">16.</span> <span class="toc-text">
          v-on 的基本用法及简写</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#v-bind%E7%BB%91%E5%AE%9A%E7%9A%84%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95%E5%8F%8A%E7%AE%80%E5%86%99"><span class="toc-number">17.</span> <span class="toc-text">
          v-bind绑定的基本用法及简写</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A8%A1%E6%9D%BF%E5%8A%A8%E6%80%81%E5%8F%82%E6%95%B0"><span class="toc-number">18.</span> <span class="toc-text">
          模板动态参数</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B1%9E%E6%80%A7%E5%8A%A8%E6%80%81%E5%8F%82%E6%95%B0"><span class="toc-number">18.1.</span> <span class="toc-text">
          属性动态参数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E5%8A%A8%E6%80%81%E7%BB%91%E5%AE%9A"><span class="toc-number">18.2.</span> <span class="toc-text">
          事件动态绑定</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#VUE%E9%98%BB%E6%AD%A2%E9%BB%98%E8%AE%A4%E4%BA%8B%E4%BB%B6%EF%BC%88%E6%AF%94%E5%A6%82%E8%A1%A8%E5%8D%95%E7%9A%84%E9%BB%98%E8%AE%A4%E6%8F%90%E4%BA%A4%EF%BC%89"><span class="toc-number">19.</span> <span class="toc-text">
          VUE阻止默认事件（比如表单的默认提交）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#VUE%E4%B8%AD%E6%A8%A1%E6%9D%BF%E7%9A%84%E6%9D%A1%E4%BB%B6%E5%88%A4%E6%96%AD-v-if"><span class="toc-number">20.</span> <span class="toc-text">
          VUE中模板的条件判断 v-if</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#VUE%E4%B8%AD%E7%9A%84computed%E5%9F%9F"><span class="toc-number">21.</span> <span class="toc-text">
          VUE中的computed域</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#VUE%E4%B8%AD%E7%9A%84watch%E5%9F%9F"><span class="toc-number">22.</span> <span class="toc-text">
          VUE中的watch域</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#VUE%E4%B8%AD%E7%9A%84%E6%A8%A1%E6%9D%BF%E6%A0%B7%E5%BC%8F%E7%BB%91%E5%AE%9A%E8%AF%A6%E7%BB%86%E8%AE%B2%E8%A7%A3"><span class="toc-number">23.</span> <span class="toc-text">
          VUE中的模板样式绑定详细讲解</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8D%95%E4%B8%AA%E6%A0%B7%E5%BC%8F%E5%8A%A8%E6%80%81%E7%BB%91%E5%AE%9A"><span class="toc-number">23.1.</span> <span class="toc-text">
          单个样式动态绑定</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E5%BD%A2%E5%BC%8F%E7%BB%91%E5%AE%9A%E5%A4%9A%E4%B8%AA%E6%A0%B7%E5%BC%8F"><span class="toc-number">23.2.</span> <span class="toc-text">
          对象形式绑定多个样式</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#VUE%E4%B8%AD%E7%9A%84for%E5%BE%AA%E7%8E%AF%EF%BC%88%E4%BB%A5%E5%8F%8A%E5%A6%82%E4%BD%95%E9%81%BF%E5%85%8D%E9%87%8D%E6%96%B0%E6%B8%B2%E6%9F%93%EF%BC%89"><span class="toc-number">24.</span> <span class="toc-text">
          VUE中的for循环（以及如何避免重新渲染）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#VUE%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1-event"><span class="toc-number">25.</span> <span class="toc-text">
          VUE中的事件对象-event</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%97%A0%E5%8F%82%E5%87%BD%E6%95%B0"><span class="toc-number">25.1.</span> <span class="toc-text">
          无参函数</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#tips-%E6%88%91%E4%BB%AC%E7%94%A8event-target%E7%9C%8B%E5%88%B0%E4%BA%8B%E4%BB%B6%E8%A7%A6%E5%8F%91%E6%BA%90"><span class="toc-number">25.1.1.</span> <span class="toc-text">
          tips: 我们用event.target看到事件触发源</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%90%AB%E5%8F%82%E5%87%BD%E6%95%B0"><span class="toc-number">25.2.</span> <span class="toc-text">
          含参函数</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#VUE%E4%B8%AD%E4%B8%80%E4%B8%AA%E6%8C%89%E9%92%AE%E7%BB%91%E5%AE%9A%E4%B8%A4%E4%B8%AA%E6%96%B9%E6%B3%95"><span class="toc-number">26.</span> <span class="toc-text">
          VUE中一个按钮绑定两个方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#VUE%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6"><span class="toc-number">27.</span> <span class="toc-text">
          VUE中的事件修饰符</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%81%9C%E6%AD%A2%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%86%92%E6%B3%A1%E6%9C%BA%E5%88%B6-%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6-click-stop"><span class="toc-number">27.1.</span> <span class="toc-text">
          停止事件的冒泡机制-事件修饰符@click.stop</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#prevent%E4%BF%AE%E9%A5%B0%E7%AC%A6%EF%BC%9A%E9%98%BB%E6%AD%A2%E9%BB%98%E7%84%B6%E8%A1%8C%E4%B8%BA%E7%9A%84%E4%BF%AE%E9%A5%B0%E7%AC%A6-click-prevent"><span class="toc-number">27.2.</span> <span class="toc-text">
          prevent修饰符：阻止默然行为的修饰符@click.prevent</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#capture%E4%BF%AE%E9%A5%B0%E7%AC%A6%EF%BC%8C%E5%86%92%E6%B3%A1%E5%8F%8D%E6%96%B9%E5%90%91-%E8%87%AA%E9%A1%B6%E5%90%91%E4%B8%8B"><span class="toc-number">27.3.</span> <span class="toc-text">
          capture修饰符，冒泡反方向(自顶向下)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#once%E4%BF%AE%E9%A5%B0%E7%AC%A6%EF%BC%8C%E4%BA%8B%E4%BB%B6%E5%8F%AA%E6%89%A7%E8%A1%8C%E4%B8%80%E6%AC%A1"><span class="toc-number">27.4.</span> <span class="toc-text">
          once修饰符，事件只执行一次</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#passive%E4%BF%AE%E9%A5%B0%E7%AC%A6%EF%BC%9A%E8%A7%A3%E5%86%B3%E6%BB%9A%E5%8A%A8%E6%97%B6%E6%80%A7%E8%83%BD%E7%9A%84%E4%BF%AE%E9%A5%B0%E7%AC%A6"><span class="toc-number">27.5.</span> <span class="toc-text">
          passive修饰符：解决滚动时性能的修饰符</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#VUE%E4%B8%AD%E7%9A%84MOUSE%E3%80%81KEYBOARD%E9%BC%A0%E6%A0%87-amp-%E9%94%AE%E7%9B%98%E6%8C%89%E9%94%AE%E7%BB%91%E5%AE%9A"><span class="toc-number">28.</span> <span class="toc-text">
          VUE中的MOUSE、KEYBOARD鼠标&amp;键盘按键绑定</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#KEYDOWN%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A-%E6%95%B2%E4%B8%8B%E9%94%AE%E7%9B%98%E9%87%8C%E7%9A%84%E6%9F%90%E4%B8%AA%E9%94%AE%EF%BC%88input%E5%B1%9E%E6%80%A7%EF%BC%89"><span class="toc-number">28.1.</span> <span class="toc-text">
          KEYDOWN事件绑定 敲下键盘里的某个键（input属性）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8D%95%E4%B8%AA%E7%89%B9%E5%AE%9A%E9%94%AE%E4%BD%8D%E6%A3%80%E6%B5%8B-input%E5%B1%9E%E6%80%A7"><span class="toc-number">28.2.</span> <span class="toc-text">
          单个特定键位检测(input属性)</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%A1%A8%E5%8D%95%E7%9A%84%E6%95%B0%E6%8D%AE%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A"><span class="toc-number"></span> <span class="toc-text">
          表单的数据双向绑定</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E5%8F%AB%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%EF%BC%9F"><span class="toc-number">1.</span> <span class="toc-text">
          什么叫数据的双向绑定？</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%A1%A8%E5%8D%95INPUT-TEXTAREA%E6%96%87%E6%9C%AC%E6%A1%86%E7%9A%84%E7%BB%91%E5%AE%9A"><span class="toc-number"></span> <span class="toc-text">
          表单INPUT TEXTAREA文本框的绑定</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%A1%A8%E5%8D%95%E5%8D%95%E9%80%89%E6%A1%86RADIO%E7%9A%84%E7%BB%91%E5%AE%9A"><span class="toc-number"></span> <span class="toc-text">
          表单单选框RADIO的绑定</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%A1%A8%E5%8D%95%E5%A4%9A%E9%80%89%E6%A1%86CHECKBOX%E7%9A%84%E7%BB%91%E5%AE%9A"><span class="toc-number"></span> <span class="toc-text">
          表单多选框CHECKBOX的绑定</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%B7%B1%E5%85%A5v-model"><span class="toc-number"></span> <span class="toc-text">
          深入v-model</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-LAZY-%E6%87%92%E6%98%BE%E7%A4%BA"><span class="toc-number">1.</span> <span class="toc-text">
          1.LAZY 懒显示</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-NUMBER-%E8%BE%93%E5%85%A5%E6%95%B0%E5%AD%97"><span class="toc-number">2.</span> <span class="toc-text">
          2.NUMBER 输入数字</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8E%BB%E9%99%A4%E5%89%8D%E5%90%8E%E7%A9%BA%E6%A0%BC-trim"><span class="toc-number">3.</span> <span class="toc-text">
          去除前后空格-trim</span></a></li></ol></section><!-- ov = overview--><section class="sidebar-ov hide"><div class="sidebar-ov-author"><div class="sidebar-ov-author__avatar"><img class="sidebar-ov-author__avatar_img" src="/blog/images/avatar.jpg" alt="avatar"></div><p class="sidebar-ov-author__text">C'est la vie</p></div><div class="sidebar-ov-state"><a class="sidebar-ov-state-item sidebar-ov-state-item--posts" href="/blog/archives/"><div class="sidebar-ov-state-item__count">48</div><div class="sidebar-ov-state-item__name">归档</div></a><a class="sidebar-ov-state-item sidebar-ov-state-item--categories" href="/blog/categories/"><div class="sidebar-ov-state-item__count">19</div><div class="sidebar-ov-state-item__name">分类</div></a><a class="sidebar-ov-state-item sidebar-ov-state-item--tags" href="/blog/tags/"><div class="sidebar-ov-state-item__count">20</div><div class="sidebar-ov-state-item__name">标签</div></a></div><div class="sidebar-ov-cc"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en" target="_blank" rel="noopener" data-popover="知识共享许可协议" data-popover-pos="up"><img src="/blog/images/cc-by-nc-sa.svg"></a></div></section><div class="sidebar-reading"><div class="sidebar-reading-info"><span class="sidebar-reading-info__text">你已阅读了 </span><span class="sidebar-reading-info__num">0</span><span class="sidebar-reading-info__perc">%</span></div><div class="sidebar-reading-line"></div></div></aside></div><div class="clearfix"></div></div></main><footer class="footer" id="footer"><div class="footer-inner"><div><span>Copyright © 2021</span><span class="footer__icon"><i class="fas fa-heart"></i></span><span>何水浪</span></div><div><span>由 <a href="http://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a> 强力驱动</span><span> v5.4.0</span><span class="footer__devider">|</span><span>主题 - <a href="https://github.com/liuyib/hexo-theme-stun/" title="Stun" target="_blank" rel="noopener">Stun</a></span><span> v2.6.2</span></div></div></footer><div class="loading-bar" id="loading-bar"><div class="loading-bar__progress"></div></div><div class="back2top" id="back2top"><span class="back2top__icon"><i class="fas fa-rocket"></i></span></div></div><div class="search-mask"></div><div class="search-popup"><span class="search-close"></span><div class="search-input"><input placeholder="搜索文章（支持多关键词，请用空格分隔）"></div><div class="search-results"></div></div><script src="https://cdn.jsdelivr.net/npm/jquery@v3.4.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.ui.min.js"></script><script>function initSearch() {
  var isXML = true;
  var search_path = 'search.json';

  if (!search_path) {
    search_path = 'search.xml';
  } else if (/json$/i.test(search_path)) {
    isXML = false;
  }

  var path = '/blog/' + search_path;
  $.ajax({
    url: path,
    dataType: isXML ? 'xml' : 'json',
    async: true,
    success: function (res) {
      var datas = isXML ? $('entry', res).map(function () {
        // 将 XML 转为 JSON
        return {
          title: $('title', this).text(),
          content: $('content', this).text(),
          url: $('url', this).text()
        };
      }).get() : res;
      var $input = $('.search-input input');
      var $result = $('.search-results');
      // 搜索对象（标题、内容）的权重，影响显示顺序
      var WEIGHT = { title: 100, content: 1 };
      var searchPost = function () {
        var searchText = $input.val().toLowerCase().trim();
        // 根据空白字符分隔关键字
        var keywords = searchText.split(/[\s]+/);
        // 搜索结果
        var matchPosts = [];

        // 有多个关键字时，将原文字整个保存下来
        if (keywords.length > 1) {
          keywords.push(searchText);
        }
        // 防止未输入字符时搜索
        if (searchText.length > 0) {
          datas.forEach(function (data) {
            var isMatch  = false;
            // 没有标题的文章使用预设的 i18n 变量代替
            var title = (data.title && data.title.trim()) || '[ 文章无标题 ]';
            var titleLower = title && title.toLowerCase();
            // 删除 HTML 标签 和 所有空白字符
            var content = data.content && data.content.replace(/<[^>]+>/g, '');
            var contentLower = content && content.toLowerCase();
            // 删除重复的 /
            var postURL = data.url && decodeURI(data.url).replace(/\/{2,}/g, '/');
            // 标题中匹配到的关键词
            var titleHitSlice = [];
            // 内容中匹配到的关键词
            var contentHitSlice = [];

            keywords.forEach(function (keyword) {
              /**
              * 获取匹配的关键词的索引
              * @param {String} keyword 要匹配的关键字
              * @param {String} text 原文字
              * @param {Boolean} caseSensitive 是否区分大小写
              * @param {Number} weight 匹配对象的权重。权重大的优先显示
              * @return {Array}
              */
              function getIndexByword (word, text, caseSensitive, weight) {
                if (!word || !text) {
                  return [];
                };

                var startIndex = 0; // 每次匹配的开始索引
                var index = -1;     // 匹配到的索引值
                var result = [];    // 匹配结果

                if (!caseSensitive) {
                  word = word.toLowerCase();
                  text = text.toLowerCase();
                }

                while((index = text.indexOf(word, startIndex)) !== -1) {
                  var hasMatch = false;
                  // 索引位置相同的关键词，保留长度较长的
                  titleHitSlice.forEach(function (hit) {
                    if (hit.index === index && hit.word.length < word.length) {
                      hit.word = word;
                      hasMatch = true;
                    }
                  });
                  startIndex = index + word.length;
                  !hasMatch && result.push({ index: index, word: word, weight: weight });
                }
                return result;
              }
              titleHitSlice = titleHitSlice.concat(getIndexByword(keyword, titleLower, false, WEIGHT.title));
              contentHitSlice = contentHitSlice.concat(getIndexByword(keyword, contentLower, false, WEIGHT.content));
            });

            var hitTitle = titleHitSlice.length;
            var hitContent = contentHitSlice.length;

            if (hitTitle > 0 || hitContent > 0) {
              isMatch = true;
            }
            if (isMatch) {
              ;[titleHitSlice, contentHitSlice].forEach(function (hit) {
                // 按照匹配文字的索引的递增顺序排序
                hit.sort(function (left, right) {
                  return left.index - right.index;
                });
              });
              /**
              * 给文本中匹配到的关键词添加标记，从而进行高亮显示
              * @param {String} text 原文本
              * @param {Array} hitSlice 匹配项的索引信息
              * @param {Number} start 开始索引
              * @param {Number} end 结束索引
              * @return {String}
              */
              function highlightKeyword (text, hitSlice, start, end) {
                if (!text || !hitSlice || !hitSlice.length) {
                  return;
                }

                var result = '';
                var startIndex = start;
                var endIndex = end;
                hitSlice.forEach(function (hit) {
                  if (hit.index < startIndex) {
                    return;
                  }

                  var hitWordEnd = hit.index + hit.word.length;
                  result += text.slice(startIndex, hit.index);
                  result += '<b>' + text.slice(hit.index, hitWordEnd) + '</b>';
                  startIndex = hitWordEnd;
                });
                result += text.slice(startIndex, endIndex);
                return result;
              }

              var postData = {};
              // 文章总的搜索权重
              var postWeight = titleHitSlice.length * WEIGHT.title + contentHitSlice.length * WEIGHT.content;
              // 标记匹配关键词后的标题
              var postTitle = highlightKeyword(title, titleHitSlice, 0, title.length) || title;
              // 标记匹配关键词后的内容
              var postContent;
              // 显示内容的长度
              var SHOW_WORD_LENGTH = 200;
              // 命中关键词前的字符显示长度
              var SHOW_WORD_FRONT_LENGTH = 20;
              var SHOW_WORD_END_LENGTH = SHOW_WORD_LENGTH - SHOW_WORD_FRONT_LENGTH;

              // 截取匹配的第一个字符，前后共 200 个字符来显示
              if (contentHitSlice.length > 0) {
                var firstIndex = contentHitSlice[0].index;
                var start = firstIndex > SHOW_WORD_FRONT_LENGTH ? firstIndex - SHOW_WORD_FRONT_LENGTH : 0;
                var end = firstIndex + SHOW_WORD_END_LENGTH;
                postContent = highlightKeyword(content, contentHitSlice, start, end);
              } else { // 未匹配到内容，直接截取前 200 个字符来显示
                postContent = content.slice(0, SHOW_WORD_LENGTH);
              }
              postData.title = postTitle;
              postData.content = postContent;
              postData.url = postURL;
              postData.weight = postWeight;
              matchPosts.push(postData);
            }
          });
        }

        var resultInnerHtml = '';
        if (matchPosts.length) {
          // 按权重递增的顺序排序，使权重大的优先显示
          matchPosts.sort(function (left, right) {
            return right.weight - left.weight;
          });
          resultInnerHtml += '<ul>';
          matchPosts.forEach(function (post) {
            resultInnerHtml += '<li><a class="search-results-title" href="' + post.url + '">';
            resultInnerHtml += post.title;
            resultInnerHtml += '</a><div class="search-results-content">';
            resultInnerHtml += post.content;
            resultInnerHtml += '</div></li>';
          });
          resultInnerHtml += '</ul>';
        } else {
          resultInnerHtml += '<div class="search-results-none"><i class="far fa-meh"></i></div>';
        }
        $result.html(resultInnerHtml);
      };
      $input.on('input', searchPost);
      $input.on('keyup', function (e) {
        if (e.keyCode === Stun.utils.codeToKeyCode('Enter')) {
          searchPost();
        }
      });
    }
  });
}

function closeSearch () {
  $('body').css({ overflow: 'auto' });
  $('.search-popup').css({ display: 'none' });
  $('.search-mask').css({ display: 'none' });
}

window.addEventListener('DOMContentLoaded', function () {
  Stun.utils.pjaxReloadLocalSearch = function () {
    $('.header-nav-search').on('click', function (e) {
      e.stopPropagation();
      $('body').css('overflow', 'hidden');
      $('.search-popup')
        .velocity('stop')
        .velocity('transition.expandIn', {
          duration: 300,
          complete: function () {
            $('.search-popup input').focus();
          }
        });
      $('.search-mask')
        .velocity('stop')
        .velocity('transition.fadeIn', {
          duration: 300
        });

      initSearch();
    });
    $('.search-mask, .search-close').on('click', function () {
      closeSearch();
    });
    $(document).on('keydown', function (e) {
      // Escape <=> 27
      if (e.keyCode === Stun.utils.codeToKeyCode('Escape')) {
        closeSearch();
      }
    });
  };

  Stun.utils.pjaxReloadLocalSearch();
}, false);

function safeOpenUrl(url) {
  var newTab = window.open();
  newTab.opener = null;
  newTab.location = url;
}

function extSearch(engine) {
  var engines = {
    google: 'https://www.google.com/search?q=',
    bing: 'https://cn.bing.com/search?q=',
    baidu: 'https://www.baidu.com/s?ie=UTF-8&wd=',
  };
  var host = window.location.host;
  var query = $('.search-input input').val().toLowerCase().trim();
  var uri = engines[engine] + query + ' site:' + host;

  if (query) {
    safeOpenUrl(uri);
  } else {
    Stun.utils.popAlert('warning', '请输入字符');
  }
}

var assistSearchList = window.CONFIG.assistSearch;

if (Array.isArray(assistSearchList)) {
  assistSearchList.forEach(function (name) {
    document.querySelector('.search-btns-item--' + name).addEventListener('click', function () {
      extSearch(name);
    }, false);
  });
}</script><script src="https://cdn.jsdelivr.net/npm/leancloud-storage@latest/dist/av-min.js"></script><script src="https://cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js"></script><script>function loadValine () {
  var GUEST_INFO = ['nick', 'mail', 'link'];
  var guest_info = 'nick';

  guest_info = guest_info.split(',').filter(function(item) {
    return GUEST_INFO.indexOf(item) > -1;
  });
  new Valine({
    el: '#valine-container',
    appId: 'fJ4fFnieffDVKy4Jkn16aHdO-gzGzoHsz',
    appKey: 'qfVo2CUC2pJ3udFzLFnd0GBM',
    notify: true,
    verify: true,
    placeholder: '说点啥再走呗~爱你',
    avatar: 'mp',
    meta: guest_info,
    pageSize: '10' || 10,
    visitor: false,
    recordIP: false,
    lang: '' || 'zh-cn',
    path: window.location.pathname
  });
}

if (false) {
  loadValine();
} else {
  window.addEventListener('DOMContentLoaded', loadValine, false);
}</script><script src="/blog/js/utils.js?v=2.6.2"></script><script src="/blog/js/stun-boot.js?v=2.6.2"></script><script src="/blog/js/scroll.js?v=2.6.2"></script><script src="/blog/js/header.js?v=2.6.2"></script><script src="/blog/js/sidebar.js?v=2.6.2"></script><script type="application/json" src="/blog/search.json"></script></body></html>